Require JS base path for variable URL structures

Question

I'm having difficultly using RequireJS on any of the subsidiary pages on my project build. The base URL is appended to the page URL and so causes 404 errors... Here is the JS:

require.config({
    "baseUrl": "content/themes/my-theme",
    "paths": {
        "jquery": "bower_components/jquery/dist/jquery.min",
        "foundation": "bower_components/foundation/js/foundation.min"
    },
    "shim": {
        "foundation": ["jquery"]
    }
});

require(['jquery', "foundation"], function($) {

    $(document).foundation();
    $(document).ready(function() {
        console.log('Working!!');
    });
});

Fair simple... So when I run this on my the root domain of my website (e.g. http://my-domain.com/), everything works fine and I get the console log of Working!! as expected. The included resources, for example jQuery, is called in to the correct URL:

http://my-domain.com/content/themes/my-theme/bower_components/jquery/dist/jquery.min.js

The problem is that when I visit an internal page, the baseURL is appended to the page URL and so it then points incorrectly, causing the file request to 404. Here's some examples of the URL's:

http://my-domain.com/about-us/content/themes/my-theme/bower_components/jquery/dist/jquery.min.js 
http://my-domain.com/category/uncategorized/content/themes/my-theme/bower_components/jquery/dist/jquery.min.js

As you can see the page URL extension /about-us/ or /category/uncategorized/ is the problem.

I've looked through the documentation and must be missing the solution to the problem. Please can you point me in the right direction.

filype · Accepted Answer · 2015-08-15 08:11:38Z

1

baseUrl can be left empty and a sensible default will be set.

You can set the baseUrl to the URL of your site such as baseUrl : "http://my-domain.com/content/themes/my-theme/"

Perhaps a contributing issue is that the paths do not start with a slash (see http://requirejs.org/docs/api.html#config-paths)

In conclusion, you can try the following:

require.config({
    "paths": {
        "jquery": "/bower_components/jquery/dist/jquery.min",
        "foundation": "/bower_components/foundation/js/foundation.min"
    },
    "shim": {
        "foundation": ["jquery"]
    }
});

require(['jquery', "foundation"], function($) {

    $(document).foundation();
    $(document).ready(function() {
        console.log('Working!!');
    });
});

edited Aug 15, 2015 at 8:11

answered Aug 11, 2015 at 9:40

filype

8,47010 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sheixt Over a year ago

Awesome, thanks for the help. The full solution for me was to remove the baseURL reference and include the full path for each for each of the dependencies e.g: "foundation": "/content/themes/my-theme/bower_components/foundation/js/foundation.min"

Collectives™ on Stack Overflow

Require JS base path for variable URL structures

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related