Question

I’m having this problem using the knockout.mapping plugin in conjunction with RequireJS. Basically, the site that hosts my app is loading knockout, knockout.mapping and requirejs in this order.

<script src="http://127.0.0.1/scripts/require.js" type="text/javascript"></script>
<script src="http://127.0.0.1/scripts/knockout.js" type="text/javascript"></script>
<script src="http://127.0.0.1/scripts/knockout.mapping.js" type="text/javascript"></script>

Without even doing anything further, I get this mismatch error. Is there some sort of order I’m failing to realize?

/// Update ///

I wrote these two tests:

• http://mjf.me/dev/requireTest.html
• http://mjf.me/dev/noRequireTest.html

Basically, what you see is that if I load require.js into my project on it’s own, prior to the mapping plugin, then the mapping plugin becomes invisible. I assume this has to do with how the mapping plugin is using require to require knockout…but I can’t nail down why it fails.

/// 2nd Update ///

It seems the scenario is important here, so I’m going to provide a bit more context.

Picture a web application which defines knockout.js and knockout.mapping.js in script tags. Then a third party widget loads into the page which uses requireJS to establish it’s dependencies. It’s that loading that seems to cause the issue. Since some libraries were loaded via the old school, manual way and others were loaded using require, require seems to mess with the context of the existing libraries.

If I remove the reference to require from the host application, I then get an error when I come back around to see if ko.mapping exists. This is clearly because the widget did a require on knockout which somehow broke it’s relationship with the mapping plugin.

I think I need someone who is very familiar with RequireJS to comment on stacking these libraries. Obviously, when I’m creating a widget for anonymous consumption, I won’t know how or if consumers are using requireJS.

/// 3rd Update ///
Trying to clarify the issue as best as possible, maybe this will make more sense:

Is there any clearly defined pattern in which you could inject a widget, which uses RequireJS, into an existing web page, which loads resources manually? It would seem like it is impossible since RequireJS will just double load anything which the traditional page may have already loaded.

Answer 1

The answer is to load all of your JavaScripts using a module loader and don’t look back. I seriously think that’s the only solution. Developing a widget which uses a module loader in a world where most client sites haven’t gone to that point yet causes you to use some old school mentality.

Now if I could just get the +50 points I pissed away on this question back 🙂