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.

Answer 1

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

npm install popper.js