Bootstrap 5 bundled with Webpack doesn't work if included in multiple endpoints

[simzikov]

Here is a quick repo I've created to demonstrate the issue: https://github.com/Simpleqode/bootstrap-5-webpack-test.

Basically I have a simple webpack config file with two endpoints one of which imports the whole of Bootstrap, while the second one imports only the Dropdown component to do some magic later. I have Split Chunks plugin in place to move the shared code to a separate file (though the problem persists even if I disable the Split Chunks plugin).

index.js:

import 'bootstrap';

dropdown.js:

import { Dropdown } from 'bootstrap';

webpack.config.js:

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    dropdown: './src/dropdown.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

If you try to run npm run build to compile the files, then open index.html in your favourite browser, you will notice that the dropdown component doesn't work. Now try to remove import { Dropdown } from 'bootstrap'; from dropdown.js or import 'bootstrap'; from index.js and recompile the files - everything will work like a charm. I am new to Webpack and Bootstrap 5 is still an alpha so I am struggling to understand if it's me doing something wrong, Bootstrap or Webpack.

[Johann-S]

Hi @Simpleqode,

Here you're importing the standalone Bootstrap (without Popper.js inside), that's the reason why your Dropdown doesn't work.

To make it work just install Popper.js in your project by doing: npm i --save [email protected]

[nerdess]

I had the same issue and the suggestion installing popper didn't work for me.

Instead, I defined bootstrap as an external and included it manually. Here are more details: https://stackoverflow.com/questions/78876298/webpack-bootstrap-multiple-bundles-cause-bootstrap-js-to-not-work/78880172#78880172