I wish to use require.js to load CDN hosted bootstrap and jquery.
I realise that this question has been asked before (Refer Steve Eynon's answer to Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Remended PopperJS Version), but the posted answers do not work for me.
What I have tried so far
The host html file has content ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=".1.3/css/bootstrap.min.css">
<script data-main="js/market-place" src="js/lib/requirejs/require.min.js"></script>
</head>
<body>
html content etc.
</body>
</html>
File js/market-place.js has content ...
console.log( 'market-place.js');
requirejs(['./decision-market-mon'], function(){
console.log( 'mon requirement met.');
require(['bootstrap'], function( bootstrap){
console.log( 'bootstrap requirement met.');
});
});
File js/decision-market-mon.js has content ...
console.log( 'decision-market-mon.js');
requirejs.config({
paths: {
jquery : '.3.1.slim.min',
popper : '.js/1.14.3/umd/popper.min',
bootstrap: '.1.3/js/bootstrap.min'
},
shim: {
bootstrap: {
deps: ['jquery', 'globalPopper']
}
}
});
define( 'globalPopper', ['popper'], function( p){
window.Popper = p;
console.log( 'global Popper is set.');
return p;
});
Result
Using Chrome as my development browser, I get the following results, at first in the javascript console ...
market-place.js
decision-market-mon.js
mon requirement met.
global Popper is set.
But then I get javascript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
require.js is trying to load ./popper.js, even after it has succesfully loaded the CDN popper.js ! Why?
I wish to use require.js to load CDN hosted bootstrap and jquery.
I realise that this question has been asked before (Refer Steve Eynon's answer to Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Remended PopperJS Version), but the posted answers do not work for me.
What I have tried so far
The host html file has content ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css">
<script data-main="js/market-place" src="js/lib/requirejs/require.min.js"></script>
</head>
<body>
html content etc.
</body>
</html>
File js/market-place.js has content ...
console.log( 'market-place.js');
requirejs(['./decision-market-mon'], function(){
console.log( 'mon requirement met.');
require(['bootstrap'], function( bootstrap){
console.log( 'bootstrap requirement met.');
});
});
File js/decision-market-mon.js has content ...
console.log( 'decision-market-mon.js');
requirejs.config({
paths: {
jquery : 'https://code.jquery./jquery-3.3.1.slim.min',
popper : 'https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min',
bootstrap: 'https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min'
},
shim: {
bootstrap: {
deps: ['jquery', 'globalPopper']
}
}
});
define( 'globalPopper', ['popper'], function( p){
window.Popper = p;
console.log( 'global Popper is set.');
return p;
});
Result
Using Chrome as my development browser, I get the following results, at first in the javascript console ...
market-place.js
decision-market-mon.js
mon requirement met.
global Popper is set.
But then I get javascript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
require.js is trying to load ./popper.js, even after it has succesfully loaded the CDN popper.js ! Why?
Share Improve this question asked Sep 10, 2018 at 14:30 Sean B. DurkinSean B. Durkin 12.7k2 gold badges38 silver badges72 bronze badges2 Answers
Reset to default 8The answer on this question / at Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Remended PopperJS Version didn't work for me.
My scenario was:
- Using Bootstrap 4.1.3 (not possible to move to a different version)
- Unable to use the bundled version, as I wanted to change the defaults within Popper (specifically, to disable GPU Acceleration to resolve some issues with blurry text in a tooltip)
Using the bundled version, I wasn't able to access the version of Popper "inside" Bootstrap to change the defaults.
Eventually, I came across the "map" option within RequireJS (https://requirejs/docs/api.html#config-map). I added this to my RequireJS config:
map: {
'*': {
'popper.js': 'popper'
}
}
That resulted in RequireJS resolving Popper correctly.
Not a perfect solution and I can't guarantee it will work for anyone else, but I spent a while on this, so I hope this helps someone!
And the answer is ...
use bootstrap version 4.0.0-beta. Version 4.0.0-beta works, but any version later (4.0.0 through to 4.1.3) is broken, with respect to requirejs support.
An alternative is to use the bundle version of bootstrap, and then you can use the latest version and don't need to link popper. There is no CDN of bundle bootstrap, so you would need to make a local copy. In this case, file js/decision-market-mon.js looks like:
need to explicitly console.log( 'decision-market-mon.js');
requirejs.config({
paths: {
jquery : 'https://code.jquery./jquery-3.3.1.slim.min',
bootstrap: 'lib/bootstrap/bootstrap.bundle.min'
},
shim: {
bootstrap: {
deps: ['jquery']
}
}
});
Also, one small point: It is better to use requirejs() rather than require() (, I think?).