Require.js ignoring baseUrl
javascript, requirejs
Solution
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
Problem
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 load`http://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?