React with webpack, "bootstrap.bundle.js Cannot read property 'setAttribute' of undefined" - popper

Question

So we are transitioning to react and we use webpack, and we have some serious problems with popper. I've tried to use bootstrap.bundle.js to avoid the problem, but it didn't help.

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
      htmlWebpackPlugin,
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
      })
  ]
};

package.json

{
  "name": "xyz",
  "version": "1.0.0",
  "description": "asdf",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.14.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "bootstrap": "^4.1.1",
    "classnames": "^2.2.6",
    "jquery": "^3.3.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-fontawesome": "^1.6.1",
    "react-router-dom": "^4.3.1"
  }
}

And here I import bootstrap in the root js file

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './components';
import 'jquery/dist/jquery';
import 'bootstrap/dist/js/bootstrap.bundle.js';

render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));

Page compiles and works fine, the issue occurs when we press the dropdown, which code looks like this

<li className={classNames(bootstrap['nav-item'], [bootstrap.dropdown])}>
                                    <a className={classNames(bootstrap['nav-link'], bootstrap['dropdown-toggle'])} 
                                    data-toggle="dropdown" href="#" role="button"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                        Problem Sets
                                    </a>
                                    <div className={bootstrap['dropdown-menu']} role="list" aria-label="Problem Sets">
                                        <a className={bootstrap['dropdown-item']}>Problem Set 01</a>
                                        <a className={bootstrap['dropdown-item']}>Problem Set 02</a>
                                        <a className={bootstrap['dropdown-item']}>Problem Set 03</a>
                                        <a className={bootstrap['dropdown-item']}>Upload</a>
                                        <input id='fileid' type='file' hidden/>
                                    </div>
                                </li>

The issue we get is: console error code error

So it seems like it cannot find the popper, although we use bundled bootstrap js which should have poopper in it as far as my understanging goes. Any tips?

Answer 1

You need to add Popper to your plugins in Webpack:

plugins: [
    new webpack.ProvidePlugin({ // inject ES5 modules as global vars
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: 'popper.js',
    }),
],