RequireJS does not run data-main script before loading required modules

Question

My project includes the following files:

./index.html
./js/main.js
./js/vendor/require.js
./js/viewmodel/vm.js

The index.html

Answer 1

That's because requirejs sets the async. Attribute on the script.

The boolean async attribute on script elements allows the external JavaScript file to run when it's available, without delaying page load first.

This means that both scripts are loaded and evaluated parallel, so none of the two scripts can access methods or functions from the other one. If you want to define requirejs variables in one script you mustn't load that script with require js.

For me there are three possibilities how you can solve that problem:

• Add the content of main.js to your page (as you mention)
• Load the main.js file without requirejs as normal script
• Define the require config before loading the scripts (link to requirejs docu )