Aurelia - Adding bootstrap 4 causes my project to fail - aurelia

Question

I have decided to add bootstrap 4 to my Aurelia project.
It is an asp.net 2 solution with webpack.
This is what I did...
I removed bootstrap 3 and added bootstrap 4 via npm.
I added popper.js using npm next.
I rebuilt the solution which compiled ok.
I then ran the solution to find I now have the following error.
content - script.bundle.js:333 loading pref showConsoleLogs before prefs were initialised, you will not get the correct result
getPref # content-script.bundle.js:333
(anonymous) # content-script.bundle.js:481
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:521
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:593
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:621
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1346
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1662
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:2097
a # content-script.bundle.js:1
u # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:2106
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:2100
ReferenceError: $ is not defined
at Object.65 (bootstrap.js:3849)
at __webpack_require__ (bootstrap d7bcc5cf3ba589d57197:659)
at fn (bootstrap d7bcc5cf3ba589d57197:85)
at Object.boot(validation - renderer - custom - attribute.js:20)
at __webpack_require__ (bootstrap d7bcc5cf3ba589d57197:659)
at fn (bootstrap d7bcc5cf3ba589d57197:85)
at WebpackLoader.<anonymous>(aurelia - loader - webpack.js:176)
at step (aurelia - loader - webpack.js:36)
at Object.next(aurelia - loader - webpack.js:17)
at aurelia- loader - webpack.js:11
Promise rejected (async)
(anonymous) # aurelia-bootstrapper.js:146
(anonymous) # aurelia-bootstrapper.js:145
Promise resolved (async)
run # aurelia-bootstrapper.js:136
(anonymous) # aurelia-bootstrapper.js:161
45 # app.js?v = W7oxVndIkrRrS4plh4l6MCNBU4PUsPEnfFxcjfVxtDg:16384
__webpack_require__ # bootstrap d7bcc5cf3ba589d57197: 659
fn # bootstrap d7bcc5cf3ba589d57197: 85
83 # app.js?v = W7oxVndIkrRrS4plh4l6MCNBU4PUsPEnfFxcjfVxtDg:27388
__webpack_require__ # bootstrap d7bcc5cf3ba589d57197: 659
0.__webpack_exports__.e # bootstrap d7bcc5cf3ba589d57197: 708
(anonymous) # bootstrap d7bcc5cf3ba589d57197: 708
client.js:82[HMR] connected
here is my webpack vendor file.
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = ({ prod } = {}) => {
const isDevBuild = !prod;
return [{
stats: { modules: false },
resolve: {
extensions: ['.js']
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
]
},
entry: {
vendor: [
'aurelia-event-aggregator',
'aurelia-fetch-client',
'aurelia-framework',
'aurelia-history-browser',
'aurelia-logging-console',
'aurelia-pal-browser',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-templating-binding',
'aurelia-templating-resources',
'aurelia-templating-router',
'aurelia-validation',
'jquery',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
}]
};
I do not have the depth of knowledge to decifer these and figure I have left out a step in the installation of bootstrap 4.
Does anybody know how bootstrap 4 should be installed into a webpack project?

Answer 1

Have a look at this pull request to aurelia-skeleton-navigation repository
https://github.com/aurelia/skeleton-navigation/pull/874
It bumps up bootstrap dependency to v4