时间戳

首页 > 解决方案 > 与 webpack 反应，“bootstrap.bundle.js 无法读取未定义的属性 'setAttribute'”-popper

javascript - 与 webpack 反应，“bootstrap.bundle.js 无法读取未定义的属性 'setAttribute'”-popper

问题描述

所以我们正在过渡到 react 并且我们使用 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"
      })
  ]
};

包.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 文件中导入 bootstrap

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>

我们得到的问题是： 控制台错误 代码错误

所以它似乎找不到 popper，尽管我们使用捆绑的 bootstrap js，就我的理解而言，它应该有 popper。有小费吗？

标签： javascripttwitter-bootstrapreactjswebpackpopper.js

解决方案

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

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

推荐阅读