Require JS not loading if not at the root path

5
votes

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 ;)

2
javascriptrequirejs

2 Answers

6
votes

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

0
votes

Had similar problem. Just check if you're not asking for files with extension, like this:

require.config({
    paths: {
        jqueryui: 'js/vendor/jquery.ui.widget.js'
    }
})

Just remove the .js part from the filename:

require.config({
    paths: {
        jqueryui: 'js/vendor/jquery.ui.widget'
    }
})

Why did the problem occurred? Because the framework I've used in my backend served it's own 404 pages, so instead of having 404 response from serve, I've always seen the fully generated, valid HTML page.