jwhitley / requirejs-rails

RequireJS support for your Rails 3 or 4 application
MIT License
592 stars 201 forks source link

Modules get loaded but won't execute, when using precompiled assets on staging and prod #70

Open heartcode opened 12 years ago

heartcode commented 12 years ago

I am having an annoying issue Rails 3.2.3.

The project is set up to use the assets pipeline for some files, and RequireJS is setup separately to handle modules. In the dev environment, when the assets are not precompiled, everything works just fine.

Unfortunately in staging and production the modules won't work anymore.

After rake assets:precompile I can see all the modules precompiled, ready to go, and loaded in the browser when I hit the page, but non of the juice the module should do works.

Below I included the code I am using to access my module:

The generated RequireJS source:

<script>var require = {"baseUrl":"/assets","paths":{"page1":"/assets/page1-65007fcb586328f4b0570112e901e236","page2":"/assets/page2-891433d4b4762054226ef1724113a8c3","page3":"/assets/page3-33a86932722c914917d6baa7edcc3f97"}};</script>
<script data-main="/assets/page1-65007fcb586328f4b0570112e901e236" src="/assets/require-0b4496496bdeb7cbd09f2e710baec25e.js"></script>

The contents of page1.js file:

console.log('before page1 module');
define([],
function () {
  console.log('page1 module');
});
console.log('after page1 module');

After hitting the page the console output looks like this:

before page1 module 
after page1 module 

There is no errors in the console whatsoever.

Any help would be much appreciated!

jbwyme commented 12 years ago

Also seeing this issue, anyone have any suggestions?

jwhitley commented 12 years ago

I think this may be a problem related to changes in RequireJS 2.x. See Upgrading to RequireJS 2.0, especially:

So RequireJS 2.0 will not execute the module's factory function (the function passed to define()), until there has been a require([]) call that has asked for it, or something that depends on it. The use of data-main on the require.js script tag counts as a require([]) call, so most best-practices use of require.js should not notice a difference.

IIRC, you can try changing the top-level page define calls to require calls and see if that works. Apologies for the delayed response; I've been very heads-down on work issues followed by some travel with virtually no 'net access. If that doesn't work, give a holler on the requirejs group to see if anyone there has suggestions for you.

heartcode commented 12 years ago

Hi @jwhitley,

Thanks for your reply. We found the solution in the mean time, but we have been a bit busy here, so haven't had the chance to post it.

We've also found that using require and creating an instance of the module solves the problem.

After the original require script tag we added the following:

<script>
  require(['page1'], function(FirstPage){
    var page = new FirstPage();
  })
</script>

Now it works like a charm :)

Cheers!