剧透：我倾向于这是Webpack的问题，而不是React的问题（因为用普通的React应用程序，直接从create-react-app中获取，一切都有效）。但仍然只发生在React上...
主要问题是一个简单的事件（例如onClick）从未被执行，这也包括没有使用任何js（手风琴，复杂的导航行为等）。所以以下内容不起作用：
<button onClick={() => alert("TEST YEAH!")}>Click Me!</button>
使用类库（如react-bootstrap或semantic-ui-react）的Button组件时，也不会出现这种情况（两者均已测试）。
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"
}
您可以在这里，codesandbox中找到最小示例。只需点击按钮，查看是否没有警报显示。此外，还有一些注释掉的代码用于Accordion 组件，显然不起作用。
我想知道...为什么会发生这种情况？我有一些想法，例如函数的绑定，代码的注入（但是alert出现在bundle.js文件中）...谢谢！
[编辑] 解决方案
从主html中删除bundle包含。由于它会自动添加，因此会被添加两次并引起问题。
- <script src="./bundle.js"></script>