Webpack无法加载bootstrap v4.0.0-beta

Question

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

Answer 1

After several tests this is my conclusion for running bootstrap v4.0.0-beta with Webpack so you will need to manually install jquery and popper.js, it will not be installed by bootstrap as dependencies anymore. It will not work without jquery and the dropdowns/popups will not work without popper.js so:

npm install bootstrap@4.0.0-beta -D
npm install jquery -D
npm install popper.js -D

I ended up editing the post, because it was pointed out that popper and popper.js are 2 different libraries(which I didn't knew) I was trying to install popper.js with npm install popper and therefore I had the issue... so installing it with npm install popper.js will install the latest version of it (and the right library). Then you have to change in the webpack.config.js just as mentioned in https://getbootstrap.com/docs/4.0/getting-started/webpack/

plugins: [
    ...
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],            
        ...
      })
    ...
  ]

Then the rest of the config should be the same as it was for v4 alpha. Anyway this is what I found out after struggling with this for a while. Hope it will help someone.

Answer 2

I got this error when upgraded to bootstarp latest version 4.0.0 .

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\work\nodejs\mepos\node_modules\bootstrap\dist\js'
 @ ./node_modules/bootstrap/dist/js/bootstrap.js 7:100-120

I just added popper.js dependency and it resolved the issue. ( jquery was already added in my dependencies)

npm install popper.js --save

Answer 3

I found same error and after some search find design find solution:

First of all you need install:

npm install babel-plugin-transform-es2015-modules-strip

And them install:

babel-preset-es2015
babel-preset-stage-2

Also i attached to image before and after. Hope is help.

Answer 4

install the bootstrap without the signal: ^ (npm install bootstrap@^4.0.0-alpha.6)

like this: npm install bootstrap@4.0.0-alpha.6

Answer 5

It's because of popper, I think? Popper v1.10 isn't available over npm, so you probably installed Popper v1.0.0 instead.