Error using crossroads.js in optimized (r.js) require setup

https://stackoverflow.com/questions/14370667

16-01-2022
|

Frage

I have developed an application using RequireJS, with no optimization layer - Require downloads each file separately. Here is the outer markup:

<!DOCTYPE html>
<html lang="en">
  <head>
     <script type="text/javascript">
       var require = {
         //some basic config
       };
     </script>
  </head>
  <body>
     <!--snip-->
  </body>
  <script type="text/javascript" data-main="main" src="scripts/lib/require.min.js"></script>
</html>

This functions without any issue, but with 100+ files the load time is really getting up there. So, time to introduce r.js optimization! I use node and r.js to create a combined file, and change data-main="main" to data-main="_build/main".

I get the following error:

Error: Mismatched anonymous define() module: (the entire body of crossroads.js)

Thoughts:

There are no manual / out-of-band define() calls or anonymous modules. Everything goes through the optimizer into this one file.
This isn't even our file - it's crossroads.min.js, which Require is able to handle just fine when the optimizer isn't involved.

I am still digging, but hoping someone can save me some time here.

Lösung

TL;DR; Use the unminified version of crossroads.js, since you are doing a r.js build it will already compress the source file.

crossroads uses an unnamed define and is wrapped into a custom UMD (universal module definition). The minified version won't work well since r.js can't add the proper module name.

before minification:

(function(define){define(["signals"], ...

after minification:

(function(a){a(["signals"], ...

r.js can't figure out what a means, it only looks for define calls.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow