剧透:我倾向于 Webpack 问题而不是 React(因为使用普通的 React 应用程序,直接形式的create-react-app
东西可以工作)。但是,它只发生在 React...
主要问题是一个简单的事件(例如onClick
,永远不会被执行),这延伸到不使用 js(手风琴、复杂的导航行为等)。所以以下不起作用:
<button onClick={() => alert("TEST YEAH!")}>Click Me!</button>
使用库的组件时也不会这样做,Button
例如react-bootstrap
or semantic-ui-react
(在两者中都经过测试)。
webpack 配置如下所示:
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ["babel-loader"]
},
{
test: /\.(scss|css)$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "./bundle.js"
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
package.json是:
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.2",
"eslint": "^7.19.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^1.7.0",
"html-webpack-plugin": "^4.5.1",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
}
您可以在此处的代码和框中找到最小的示例。只需单击按钮并查看没有显示警报。此外,还有一些Accordion
组件的注释代码,这显然是行不通的。
我想知道...关于为什么会发生这种情况的任何提示?我的一些想法是函数的绑定,代码的注入(但alert
出现在bundle.js文件中)......提前致谢!
[编辑] 解决方案
删除主 html 中的捆绑包。由于它是自动添加的,因此被添加了两次并导致问题。
- <script src="./bundle.js"></script>