Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load timeout for modules with requirejs

I'm using requirejs to load some libraries and dependencies.

When I just load jQuery, it's working perfectly:

main.js

require.config({
  shim: {
    jquery: {
      exports: '$'
    }
  },
  paths: {
    jquery: 'vendor/jquery'
  }
});

require([
  'vendor/jquery',
  'app/init'
]);

app/init.js

define(
  ['jquery'],
  function ($) {
    $(document).ready(function () {
      console.log('domready');
    })
  }
)

But when I try to add underscore, in the network panel the file is correctly loaded but in the console I get a

Uncaught Error: Load timeout for modules: underscore

What's happening? I also tried the waitSeconds: 200 options inside the require.config without any success.

Below the final (broken) code as a reference:

main.js

require.config({
  shim: {
    jquery: {
      exports: '$'
    },
    underscore: {
      exports: '_'
    }
  },
  paths: {
    jquery: 'vendor/jquery',
    underscore: 'vendor/underscore',
  }
})

require([
  'vendor/jquery',
  'vendor/underscore',
  'app/init'
])

app/init.js

define(
  ['jquery', 'underscore'],
  function ($, _) {
    $(document).ready(function () {
      console.log('domready');
    })
  }
)
like image 508
Luke Avatar asked Nov 29 '13 14:11

Luke


People also ask

How do you fix mismatched anonymous definition module?

To fix the problem, you must update your JavaScript define methods within RequireJS, according to following documentation: https://requirejs.org/docs/api.html#define.

What is Shim RequireJS?

shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value. Here is an example. It requires RequireJS 2.1. 0+, and assumes backbone. js, underscore.

What is the use of RequireJS?

RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programmingmodular programmingModular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.https://en.wikipedia.org › wiki › Modular_programmingModular programming - Wikipedia. It also helps to improve the speed and quality of the code.

What is RequireJS config?

It is used by RequireJS to know which module to load in your application. For instance − <script data-main = "scripts/main" src = "scripts/require.js"></script> To include the Require. js file, you need to add the script tag in the html file. Within the script tag, add the data-main attribute to load the module.


1 Answers

In define and require calls you sometimes refer to your modules as "vendor/<name of module>" and sometimes as "<name of module>". This is wrong. Based on the config you show you should refer to your modules as "<name of module>" in all require and define calls. So always refer to jQuery and Underscore as "jquery" and "underscore", not "vendor/.... When you refer to them with the full path you bypass the shim configuration.

Actually, you can change your require call to:

require(['app/init']);

You don't need to refer to jQuery and Underscore there. They will be loaded when app/init.js is loaded due to the define there requiring them.

(Also, relatively recent versions of jQuery don't need a shim because jQuery detects that it is loaded by an AMD-compatible loader and calls define itself. This is not the source of your problem but it is good to know.)

like image 123
Louis Avatar answered Oct 08 '22 05:10

Louis