I'm getting the error across all browsers. I says "unable to process binding "component"...". I have read quite a number of articles including the requirejs site. I've checked out what can cause the error but I'm lost as to whether they apply to my code or not. To the best of my knowledge, I'm not manually loading anything using the script tag and every module is loaded with requirejs.
I created a knockout project using yoman: yo ko. After that components are added using yo ko:component [name of component]. The page loads fine when the most of the time but periodically gives the error below. The frequency seems to be increased when I use two components. I edited the new component and removed the reference to the knockout object and the error still happens though not as frequently.
The exact error is as follows:
Uncaught Error: Unable to process binding "component: function (){return f}"
Message: Mismatched anonymous define() module: function (a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}}
http://requirejs.org/docs/errors.html#mismatch
Below are some of the code in the files (if it helps)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ko-cai</title>
<!-- build:css -->
<link href="bower_modules/semantic/dist/semantic.css" rel="stylesheet">
<link href="bower_modules/c3/c3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- endbuild -->
<!-- build:js -->
<script src="app/require.config.js"></script>
<script data-main="app/startup" src="bower_modules/requirejs/require.js"></script>
<!-- endbuild -->
</head>
<body>
<div>
<!--<side-bar></side-bar>
<page-container></page-container>-->
<dashboard></dashboard>
this is a test
</div>
</body>
</html>
require.config.js
// require.js looks for the following global when initializing
var require = {
baseUrl: ".",
paths: {
"crossroads": "bower_modules/crossroads/dist/crossroads.min",
"hasher": "bower_modules/hasher/dist/js/hasher.min",
"jquery": "bower_modules/jquery/dist/jquery",
"knockout": "bower_modules/knockout/dist/knockout",
"knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections",
"signals": "bower_modules/js-signals/dist/signals.min",
"text": "bower_modules/requirejs-text/text",
"semantic": "bower_modules/semantic/dist/semantic",
"lodash": "bower_modules/lodash/dist/lodash",
"c3": "bower_modules/c3/c3",
"d3": "bower_modules/d3/d3",
"config": "../../cai/config",
"observations": "../../cai/observations"
},
shim: {
"semantic": { deps: ["jquery"] },
"c3": { deps: ["d3"]},
"config": { deps: ["knockout"]},
"observations": { deps: ["knockout","jquery"]}
}
};
dashboard.html
<h2>dashboard</h2>
<p data-bind='text: message'></p>
dashboard.ts
/// <amd-dependency path="text!./dashboard.html" />
import ko = require("knockout");
export var template: string = require("text!./dashboard.html");
export class viewModel {
public message = ko.observable("Hello from the dashboard component too!");
constructor (params: any) {
}
public dispose() {
// This runs when the component is torn down. Put here any logic necessary to clean up,
// for example cancelling setTimeouts or disposing Knockout subscriptions/computeds.
}
}
dashboard.js
define(["require", "exports", "knockout", "text!./dashboard.html"], function(require, exports, ko) {
exports.template = require("text!./dashboard.html");
var viewModel = (function () {
function viewModel(params) {
this.message = ko.observable("Hello from the dashboard component too!");
}
viewModel.prototype.dispose = function () {
// This runs when the component is torn down. Put here any logic necessary to clean up,
// for example cancelling setTimeouts or disposing Knockout subscriptions/computeds.
};
return viewModel;
})();
exports.viewModel = viewModel;
});
//# sourceMappingURL=dashboard.js.map
After some more investigations, I was able to come up with a solution. May not be the best but I'm yet to see another. The problem had to do with require.js. It appears that it does not matter what is contained in the file (I even tried one with a blank function and got the mismatch error). I however noted that, when I execute the same require statement after the error, it actually works. I added a component loader to knockout to fetch the Config of the components. Below is the loader that worked for me. Hope it is useful to someone until a better solution is found or we get to the bottom of this issue.
//register a custom loader
ko.components.loaders.unshift({
getConfig: function(name,callback){
ko.components.defaultLoader.getConfig(name, function(c){
if (c && c.require){ //do custom loading here. make first attempt to fetch the config
try{
require([c.require],function(config){
callback(config);
});
}catch(e){
//todo: check that this is mismatch error and try again. else throw exception
require([c.require], function(config){ //make the request again
callback(config);
});
}
} else {
callback(c);
}
})
}
});