Intermittent RequireJS Load Error

Question

I have a rather large Backbone.js project that uses RequireJS. As the project size grew ("size" here referring to the number of separate module files), intermittent errors started cropping up. Most of the time, it's an object error:

Uncaught TypeError: object is not a function

Occasionally, it complains about a module not being loaded.

These errors disappear once the project is run through the r.js optimizer. They only happen when RequireJS is loading the individual modules.

Which brings me down to my question - does RequireJS start having issues with modules loading in time when the number of modules reach a certain number?

I doubt that this is really a RequireJS issue, but rather some browser-related one. Does it fail consistently across different browsers? Does RequireJS log any problems, such as timeouts when loading scripts, to the console? — Lucero
– Lucero, Commented Jun 9, 2012 at 7:05
I've seen it the most in Chrome, though I've also seen it occur in Firefox as well. There are no RequireJS logs or errors. The error that is occurring is when I try to instantiate a Javascript function (prototype) exported from a loaded module. It is throwing because the module doesn't seem to be properly loaded, since Javascript doesn't recognize it as a function. This is when the error actually happens - which is only sometimes. The rest of the time, the code executes perfectly fine. Regardless, there's no RequireJS timeout error. — redhotvengeance
– redhotvengeance, Commented Jun 9, 2012 at 7:29
Sounds like an order of load/initialization issue to me. Note that you can get undefined references if you have circular dependencies in your code, I would look for them first. We have a project with several hundred JS files loaded by RequireJS and no such problems whatsoever (neither in Chrome nor other browsers). — Lucero
– Lucero, Commented Jun 9, 2012 at 7:43
Absolutely sounds like a sync/race condition issue to me as well. I have/participate in a very large Backbone project as well, and no degrading on RequireJS part has ever taken place. — ZenMaster
– ZenMaster, Commented Jun 9, 2012 at 9:41
@Ben Good suggestions - unfortunately, they don't really apply to my situation. RequireJS is my only point of entry into this app. Plus, it seems like in your situation, the app would fail even after optimization as well, which mine doesn't. It has never thrown these errors after being run through the r.js optimizer. And there aren't any module load timeouts being thrown either. No RequireJS errors logged. Very odd and quite frustrating. — redhotvengeance
– redhotvengeance, Commented Jun 14, 2012 at 0:27

Brendan O'Brien · Accepted Answer · 2012-09-27 19:08:43Z

9

This Issue seems to be addressed in the forthcoming require.js 2.1 release. See here:

https://github.com/jrburke/requirejs/issues/478

answered Sep 27, 2012 at 19:08

Brendan O'Brien

911 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rthrfrd · Accepted Answer · 2012-06-18 17:14:42Z

5

This is definitely a bug that I have encountered a lot over the last few days. Loading one module can cause a second completely unrelated module in a different part of the app to become undefined where it worked perfectly before. I have used RequireJS a lot - this is not a script loading or circular dependency issue. At first I encountered the error most often when requiring a text file in a 2nd-tier view that gets iterated quite a few times (1800+):

domReady -calls-> new View1() -iterates-> new SubView() -depends-> text!template
         -calls-> new View2() --> undefined!

This would cause a completely unrelated module elsewhere to become undefined. I worked around it for a while by integrating the SubView functionality into the View module.

domReady -calls-> new CombinedView1() -depends-> text!template
         -calls-> new View2() --> ... all good ...

As the project has grown I have hit the wall again and really need to find a way to fix it. Including more modules causes previously defined ones to become undefined at random. Require throws no errors and neither does the browser. I'm not using CoffeeScript or anything like that either.

I have taken some time create a version of my application that has the same module and dependency structure with the dependent Views, Models and Collections stubbed out. This works perfectly fine, so I can only assume there is some kind of memory issue? However Chrome never throws any errors either.

I think my next step will be to pad out my skeleton application with some memory-consuming loops and see what happens: I will let you know how it goes.

Using Require v2.0.1, so no order plugin - dependencies and packages are all configured using the shim config directive. Non-AMD modules loaded:

Backbone
Underscore
jQuery
Mustache
Leaflet
Bootstrap

P.S. Apologies if this is not in the right place. I thought it would be better as a comment but I honestly can't see the comment button anywhere.

Update: This dependency structure breaks consistently:

Main
  - View 1
      - text!...
      - View 2
         - text!...

Substituting the text with empty strings works fine every time:

Main
  - View 1
      - View 2

So why does waiting for the text to load cause View 1 to become undefined when it is explicitly set as a dependency in the Main module? Surely Main should not be called until everything it is dependent on is loaded?

edited Jun 18, 2012 at 17:14

answered Jun 18, 2012 at 16:59

rthrfrd

714 bronze badges

3 Comments

Steve Beer Over a year ago

I got exactly the same problem. also see groups.google.com/forum/?fromgroups#!topic/requirejs/…

Steve Beer Over a year ago

Apparently, also requiring the text!... dependency of View 2 in View 1 makes the module load properly again. Not beautiful, but it works.

redhotvengeance Over a year ago

Good to hear that I'm not crazy - it obviously can't be circular dependency issues if it is intermittent. Clearly something deeper going on. I'll be following the Google Groups thread you opened as well, @SteveBeer.

Steve Beer · Accepted Answer · 2012-08-28 06:34:14Z

5

I've been fighting with the same issue the last days and this is what I found out:

Apparently, a nested dependency structure requiring templates via the text.js plugin can cause a race condition that lets the top level module not be ready when requirejs thinks it is. I only ran into this problem when I had several nested module dependency structures of this type:

Router
  -> View1
    -> text!.../view1.html
    -> View2
      -> text!.../view2.html
  -> View3
    -> text!.../view3.html
    -> View4
      -> text!.../view4.html
  -> View5
    -> text!.../view5.html
    -> View6
      -> text!.../view6.html
  -> View7
    -> text!.../view7.html
    -> View8
      -> text!.../view8.html

Having this structure, I got TypeErrors like 'View1 is not a constructor' when the router tries to instantiate the views.

Also requiring the templates of the nested views in the top level views solved the problem for me:

Router
  -> View1
    -> text!.../view1.html
    -> text!.../view2.html
    -> View2
      -> text!.../view2.html
  -> View3
    -> text!.../view3.html
    -> text!.../view4.html
    -> View4
      -> text!.../view4.html
  -> View5
    -> text!.../view5.html
    -> text!.../view6.html
    -> View6
      -> text!.../view6.html
  -> View7
    -> text!.../view7.html
    -> text!.../view8.html
    -> View8
      -> text!.../view8.html

I don't really know how require.js works, but this looks to me like those nested text! calls aren't regarded when some 'ready' flag for the parent module is set.

edited Aug 28, 2012 at 6:34

answered Aug 17, 2012 at 7:16

Steve Beer

1,34812 silver badges16 bronze badges

1 Comment

redhotvengeance Over a year ago

Yeah, this looks like what is causing the issue. I'm also using quite a lot of text! calls, so it looks like the issue is somewhere in there.

user1271518 · Accepted Answer · 2012-08-11 09:06:51Z

1

Verify that you have

shim configured http://requirejs.org/docs/api.html#config-shim
'waitSeconds' property and
http://requirejs.org/docs/errors.html#timeout

Hope this helps

answered Aug 11, 2012 at 9:06

user1271518

6361 gold badge9 silver badges25 bronze badges

Collectives™ on Stack Overflow

Intermittent RequireJS Load Error

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related