Bootstrap popper issue while using webpack

Question

I want to include bootstrap into my main.ts so that in _Layout.cshtml I wouldn't need to write

<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

just leave

<script src="~/bundle/bundle.js" asp-append-version="true"></script>

When I add bootstrap (4.0.0-beta) in main.ts like this:

require("bootstrap");

I get an error in a console output

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

I installed popper:

npm install popper

and added it into the plugin section, so it looks like

plugins: [
            new CleanWebpackPlugin([bundleFolder]),
            new webpack.ProvidePlugin({
                $: node_dir + "/jquery",
                jQuery: node_dir + "/jquery",
                'window.$': node_dir + '/jquery',
                Popper: ['popper.js', 'default']
            })
        ]

but got another webpack-script error:

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve 'popper.js' in 'D:\Projects\TestApp\TestApp.Web\node_modules\bootstrap\dist\js' @ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20 @ ./app/main.ts

Currently I have no idea how to fix it.

the plugins was what I was missing... so I found the answer in your question, thanks! — sebagomez
– sebagomez, Commented Apr 6, 2019 at 6:06

amplifier · Accepted Answer · 2017-09-07 22:34:57Z

14

It appeared that I need popper.js, not popper. So to fix it:

npm install popper.js

answered Sep 7, 2017 at 22:34

amplifier

1,8431 gold badge26 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mini John Over a year ago

Oh man, I spend way to much time before finding this. Thank you!

Collectives™ on Stack Overflow

Bootstrap popper issue while using webpack

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related