My goal is to utilize require.js to load bootstrap and jquery from a CDN.
Although similar questions have been asked previously (such as Steve Eynon's response in Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version), I have tried the suggested solutions without success.
Approaches I've Tried
The main HTML file includes...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/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>
The file js/market-place.js contains...
console.log( 'market-place.js');
requirejs(['./decision-market-common'], function(){
console.log( 'common requirement met.');
require(['bootstrap'], function( bootstrap){
console.log( 'bootstrap requirement met.');
});
});
The file js/decision-market-common.js includes...
console.log( 'decision-market-common.js');
requirejs.config({
paths: {
jquery : 'https://code.jquery.com/jquery-3.3.1.slim.min',
popper : 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min',
bootstrap: 'https://stackpath.bootstrapcdn.com/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;
});
Outcome
While using Chrome for development, I initially see the following results in the console...
market-place.js
decision-market-common.js
common requirement met.
global Popper is set.
However, I encounter a JavaScript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
Even though the CDN popper.js is successfully loaded, require.js attempts to load ./popper.js. Why is this happening?