[英]React with webpack, “bootstrap.bundle.js Cannot read property 'setAttribute' of undefined” - popper
So we are transitioning to react and we use webpack, and we have some serious problems with popper. 因此,我们正在过渡以做出反应,我们使用了webpack,但是popper存在一些严重的问题。 I've tried to use bootstrap.bundle.js to avoid the problem, but it didn't help.
我尝试使用bootstrap.bundle.js来避免该问题,但这没有帮助。
webpack.config.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 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 在这里,我在根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'));
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. 因此,尽管我们使用了捆绑的bootstrap js,但据我的了解,它似乎找不到popper。 Any tips?
有小费吗?
You need to add Popper to your plugins in Webpack: 您需要将Popper添加到Webpack的插件中:
plugins: [
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: 'popper.js',
}),
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.