Require.js ignoring baseUrl

7
votes

OK this is driving me crazy so maybe someone can point me in the right direction...

I'm using the latest require.js combined with jquery as my module loader. I am using the data-main attribute to point to a config file with a baseUrl. When I try to load a module the baseUrl is ignored and require is attempting to load from the same location as main.js.

/js/main.js

require.config({
    baseUrl: '/js/vendor/'
});

/path/to/page.html

<script data-main="/js/main" src="/js/vendor/require-jquery.js"></script>
<script>
require(['jquery', 'bootstrap'], function($) {
    $(function() {
        console.log('hello world!');
    });
});
</script>

Expected:

Loads http://localhost:3000/js/vendor/bootstrap.js and logs hello world!

Actual:

Attempts to loadhttp://localhost:3000/js/bootstrap.js -- Fails :'(

I've tried using relative paths instead of absolute paths for both data-main and src in the require script tag. Nothing I do seems to trigger the baseUrl. Am I totally missing something in the docs?

2
javascriptrequirejs

2 Answers

10
votes

the trouble is that require.js load script asynchronously (that's the point behind requirejs), so when you add the require() into a script tag right after you load require, this script execute before js/main.js get loaded.

The easy way would be to include all this in main.js, or create a new file to hold this piece and load it from js/main

/js/main.js

require.config({
    baseUrl: '/js/vendor/'
});

require(['jquery', 'bootstrap'], function($) {
    $(function() {
        console.log('hello world!');
    });
});

-- OR --

/js/main.js

require.config({
    baseUrl: '/js/vendor/',
    deps: ['../boostrap']
});

/js/boostrap.js

define(['jquery', 'bootstrap'], function($) {
    $(function() {
        console.log('hello world!');
    });
});

note require() became a define() in the bootstrap file

7
votes

Your config is being executed in async mode. When first require call is founded, your config is not yet applied. According to documentation:

when require.js loads it will inject another script tag (with async attribute) for scripts/main.js

So, just execute your config in sync mode:

<script src="/js/vendor/require-jquery.js"></script>
<script src="/js/main.js"></script>
<script>
require(['jquery', 'bootstrap'], function($) {
  $(function() {
    console.log('hello world!');
  });
});
</script>

More info: Patterns for separating config from the main module