javascript - RequireJS: Paths not working from require.config() -

this question has answer here:

• requirejs configuration ignored inline require calls follow script tag loads app 1 answer

even though include require-min.js included, it's not picking paths require.config. i've used data-main method load config file.

<!--when require.js loads inject script tag     (with async attribute) scripts/main.js--> <script data-main="scripts/main" src="scripts/require.js"></script> 

you typically use data-main script set configuration options , load first application module. [...]

however, aliases using jquery don't work. in config.js file...

...  paths: {         jquery: 'thirdparty/jquery-1.8.3.min' ... 

my index.html follows...

... <script type='text/javascript' src='js/require.js' data-main='js/config.js'></script> ... require(['jquery'], function ($) { ... 

this throws following errors sometimes on console:

get http://<ipaddress>/js/jquery.js 404 (not found) require.js:1895 uncaught error: script error for: jquery 

i since, say, 2 times out of 10 loads properly. how solve this?

disclaimer: closely related question "understanding requirejs paths". however, answer not complete , not come top hit specific question. further, it's reasonable copy-paste official docs. mods please vote down applicable. oh, , edit away applicable ;)

from official docs quoted above , reading on:

note: script tag require.js generates data-main module includes async attribute. means you cannot assume load , execution of data-main script finish prior other scripts referenced later in same page.

solution:

include config file synchronously using plain old <script> tags:

<script type='text/javascript' src='js/require.js'> <script type='js/config.js'></script> 

this solves issue.

---

additional info

docs

also, can define config object global variable require before require.js loaded, , have values applied automatically. example specifies dependencies load require.js defines require():

<script>     var require = {         deps: ["some/module1", "my/module2", "a.js", "b.js"],         callback: function(module1, module2) {             //this function called when dependencies             //listed above in deps loaded. note             //function called before page loaded.             //this callback optional.         }     }; </script> <script src="scripts/require.js"></script>