RequireJS not loading the right path

Question

I'm trying to retrofit requirejs into a project and I am intermittently getting a "404 Not Found" on files.

Every, roughly, 3 or 4 reloads I get the following errors

GET http://localhost:8080/build/jquery.js 
Uncaught Error: Script error for: jquery

GET http://localhost:8080/build/touchSwipe.js
Uncaught Error: Script error for: touchSwipe

My files looks like this:

config.js

require.config({
    paths: {
        'jquery': 'vendor/jquery',
        'touchSwipe': 'vendor/jquery.touchSwipe.min',
        'scripts': 'scripts/'
    },
    shim: {
        'touchSwipe': {
            deps: ['jquery']
        }
    }
});
require(['main']);

main.js

require(
    ['scripts/menu', 
    .. more js files .. ]);

I use grunt-contrib-requirejs to optimize the files and that all seems to work OK

Gruntfile.js

requirejs: {
    compile: {
        options: {
            baseUrl: "path/to/file/",
            mainConfigFile: "path/to/file/config.js",
            dir: 'path/to/build/',
            modules: [
                {
                    name: 'main'
                },
            ],
            uglify: {
                no_mangle: true
            },
        }
    }
}

...and just to fill in the blanks, my main.hbs file has this script tag

<script data-main="/build/config" src="/js/vendor/require.js"></script>

As I said, this is all working fine until I try to introduce more modules. Modules that I only want to be loaded on certain pages.

I try to do this by adding the following code at the end of the relevant page

<script type="text/javascript">
    require(['scripts/page1']);
</script>

The page1.js file looks like so...

define(['jquery', 'touchSwipe'], function ($j) {
    ...
});

The times when these errors don't appear, the site seems to work fine. Another thing to note is that this only seems to have when I run the code through the Grunt task.

The issue is that the urls, in the errors, are wrong. jQuery should be found at /build/vendor/ rather than /build/, whereas touchSwipe is the path I defined for a library. It looks like a timing issue; the config is being loaded after the new file.

johnjo johnjo · Accepted Answer · 2015-03-25T09:53:39

I figured it out

I need to specify the files in Grunt, under modules, like so

modules: [
    //First set up the common build layer.
    {
        //module names are relative to baseUrl
        name: 'config',
        include: [
            'jquery',
            'touchSwipe',
            'jquery-ui',
            'modernizr'
        ]
    },
    {
      name: 'scripts/page1',
      exclude: ['config']
    }
],

then rather than adding the config file to the script tag, I did this

require(['./build/config'], function () {  
    require(['scripts/page1']);
});

and I added

baseUrl: "build"

to my config file and this seems to have done the trick

RequireJS not loading the right path

1 Answers