使用webpack進行反應，“ bootstrap.bundle.js無法讀取未定義的屬性'setAttribute'”-Popper

Question

因此，我們正在過渡以做出反應，我們使用了webpack，但是popper存在一些嚴重的問題。 我嘗試使用bootstrap.bundle.js來避免該問題，但這沒有幫助。

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"
  }
}

在這里，我在根js文件中導入引導程序

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'));

頁面可以編譯並正常工作，當我們按下下拉菜單時會出現問題，該代碼如下所示

<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>

我們得到的問題是： 控制台錯誤 代碼錯誤

因此，盡管我們使用了捆綁的bootstrap js，但據我的了解，它似乎找不到popper。 有小費嗎？

Answer 1

您需要將Popper添加到Webpack的插件中：

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