CODEWITHSUNDEEP
javascriptrequirejsamdr.jscrossroadsjs
Rex M
Rex M

Reputation: 144132

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

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:

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

Upvotes: 1

Views: 219

Answers (1)

Miller Medeiros
Miller Medeiros

Reputation: 1256

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.

Upvotes: 1

Related Questions