Require JS not loading if not at the root path

Question

I have an issue with my setup of requirejs, I've tried to fix it but each time I'm breaking the app. Here is my index.html

<script type="text/javascript" src="/js/bower_components/requirejs/require.js"></script>
<script>
    // obtain requirejs config
    require(['require', 'js/require-config'], function (require, config) {

        // update global require config
        window.require.config(config);

        // load app
        require(['main']);
    });
</script>

This is working well if I load the app from the root path "/" but as soon as I try to refresh the app somewhere else (ie. /user/1) I got the following error:

Resource interpreted as Script but transferred with MIME type text/html: "http://domain.local/users/js/require-config.js".

require.js:1895 Uncaught SyntaxError: Unexpected token <

require-config.js:1 Resource interpreted as Script but transferred with MIME type text/html: "http://domain.local/users/main.js".

require.js:1895 Uncaught SyntaxError: Unexpected token <

as you can see it's looking for the file at the relative path: http://domain.local/users/js/require-config.js

but it should load: http://domain.local/js/require-config.js

if I add a / in front of the module, then it's not working anymore because it's looking for a file instead of a module:

<script type="text/javascript" src="/js/bower_components/requirejs/require.js"></script>
<script>
    // obtain requirejs config
    require(['require', '/js/require-config'], function (require, config) {

        // update global require config
        window.require.config(config);

        // load app
        require(['/js/main']);
    });
</script>

Resource interpreted as Script but transferred with MIME type text/html: "http://domain.local/js/require-config". require.js:1895

Uncaught SyntaxError: Unexpected token < require-config:1 Resource interpreted as Script but transferred with MIME type text/html:

"http://domain.local/js/main". require.js:1895 Uncaught SyntaxError: Unexpected token <

I've tried a couple of combinaison, but each time it's breaking something :(

Help would be greatly appreciated ;)

Answer 1

If you path start with "/", add .js extension.

<script type="text/javascript" src="/js/bower_components/requirejs/require.js"></script>
<script>
    // obtain requirejs config
    require(['require', '/js/require-config.js'], function (require, config) {

        // update global require config
        window.require.config(config);

        // load app
        require(['/js/main.js']);
    });
</script>

Prefer to use this part :

index.html :

<script data-main="/js/require.file.js" src="/js/bower_components/requirejs/require.js"></script>

require.file.js :

require.config({ // Your config :
    baseUrl: "/js"
});
require(["main"],
    function(someModule, myModule) {
        //onload.
    }
);

See more : Configuration Options