I've recently made a config with webpack and bootstrap v4.0.0-alpha.6 which worked fine until today when I tried to change to v4 beta and now I can't seem to make it work properly :( I have this config:
webpack.config.js
entry: {
app: "./src/app.js"
},
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/[name].js',
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node-modules/, loader: 'babel-loader' },
{ test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/ },
{ test: /\.(css|scss|sass)$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'postcss-loader', 'sass-loader']
}),
exclude: /node_modules/
}
]
},
plugins: [
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new ExtractTextPlugin('/css/[name].css'),
in my app.js I have the require('bootstrap');
Now when I try to make build now I get an error:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module build failed: ReferenceError: Unknown plugin "transform-es2015-modules-strip" specified in "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstra
p\\.babelrc" at 0, attempted to resolve relative to "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstrap"
The issue seems to be here in bootstrap/.babelrc
{
"presets": [
[
"es2015",
{
"loose": true,
"modules": false
}
]
],
"plugins": [
"transform-es2015-modules-strip"
]
}
I tried to go in bootstrap directory and ran: npm install (i don't know why I should do that since I already have my own config for bable/autoprefixer)
I already have babel-core, babel-loader, babel-preset-es2015 installed in my own package.json I installed transform-es2015-modules-strip and ran build again:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-17
@ ./src/app.js
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20
@ ./src/app.js
So I tried and installed jquery and popper in my project as dev dependency...got rid of the jquery error but..:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20
@ ./src/app.js
Out of ideas...and this seems over complicated...I can't seem to know what I'm doing wrong, the only thing I can come up with is to get the bootstrap.js file put it directly with my other js files... long post but I wanted to be as specific as possible.
What should I do to make it work again, I would really appreciate some help. Thank you