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?

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?

• javascript
• requirejs

2 Answers 2

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

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