7

I'm following the multipage shim sharing pattern here: https://github.com/requirejs/example-multipage-shim

I'm using the same common.js and have a very similar and simple set up:

<script src="js/library/requirejs/require.min.js"></script>
<script>
require(['./js/config/common'], function (common) {
  //go on...
});
</script>

Everything loads fine and I can continue running operations inside the require closure, but I keep getting an error in Firefox complaining about a mismatched anonymous define() module with the above code. Given how simple it is and that I'm following the example pattern pretty much exactly I'm a bit confused as to why I'm getting it. I haven't used define() anywhere. Has something in requireJS changed in the last 24 days (since the multipage git repo was updated)?

Undo
  • 25,519
  • 37
  • 106
  • 129
Dan
  • 6,022
  • 3
  • 20
  • 28
  • Is there a self-contained JSFiddle you can post which illustrates the issue? You say it's "pretty much exactly" like the example, but **how** exactly is "pretty much" :-) – explunit Jun 04 '13 at 15:37
  • I'm working on a huge platform unfortunately, if I piece apart what I've done above in to jsfiddle it works fine. So leads me to believe there might be an issue or conflict with something else on the page. One strage note though -- if just place an empty define(function(){}) in common.js the error is not thrown, as soon as I reference requirejs.config() (even without args), I get the error... – Dan Jun 04 '13 at 18:01
  • OK, I believe the problem is the same as one the one here, http://stackoverflow.com/questions/15371918/mismatched-anonymous-define-module, in that the problem happens when I use requirejs in an anonymous module definition. The docs say that this is an issue when not using the optimizer, and says use the optimizer to fix it. Question is -- how exactly are we supposed to get around it while doing development, i.e. working in an unoptimized environment?? – Dan Jun 04 '13 at 18:33
  • More weird stuff, if I put an alert() before the //go on... line above the error doesn't occur. – Dan Jun 04 '13 at 19:46

2 Answers2

7

Answer was this, hopefully it helps someone:

Given this was a big platform, lots of other stuff was being loaded outside of the require flow (we're slowly transitioning).

Some of these assets, i.e. jquery 1.10, spin.js, etc., were compatible with AMD, and were calling define(). In the spin.js case, it was calling define() anonymously, which was tripping up the loading as is explained in the second point of the Mismatched Anonymous error in the resolve docs.

Good grief.

Dan
  • 6,022
  • 3
  • 20
  • 28
  • Did you give the 'offending' files an ID? – Jesse Burcsik Jan 10 '14 at 17:17
  • No because we didn't want to change third-party source, we just bit the bullet and made some structural changes -- either we removed all loading of the offending library from the RequireJS flow (then referenced the stuff globally) or vice versa, restricted a library to Require flow use only. – Dan Jan 12 '14 at 05:54
  • I understand how you could bring the offending libraries into require. I don't understand the first example, which I think might be the solution I need. - You said _"we removed all loading of the offending library from the RequireJS flow"_. From your initial question I thought the offending JS files we already apart from your requreJS flow. (as is my situation). I can't bring them in. – Jesse Burcsik Jan 14 '14 at 22:48
  • We had a lot of mismatching going on with Handlebars and jQuery for example, since they were both used in and out of the flow a lot and causing collisions. So we just had to remove all references to jQuery and H-bars inside Require and let the whole RJS flow refer to them as globals loaded before the first require() got kicked off. Not ideal since Require is what we're trying to move toward, but we had to do it in the meantime. So yah, any named module that's being called inside your Require flow, remove it and just load it before require() gets started. – Dan Jan 16 '14 at 01:27
0

It is clear what is going on. You are trying to load module, but your common.js has only require.config and there is no module. Therefore updated RequireJS (not Firefox) throws an error. Include define in your common JS and error should go away.

// common.js stuff...
define({});
Tomas Kirda
  • 8,347
  • 3
  • 31
  • 23
  • I'm afraid that's not it, RequireJS does not strictly require an AMD definition to load. Also, the code is not module-wrapped in the sample pattern, and that's written by someone close to the RequireJS project. Lastly, I tried it, and still get the error. Thanks for trying! – Dan Jun 04 '13 at 13:42