js事件没有在webpack构建的反应应用程序中触发

Question

剧透：我倾向于 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"
  }

您可以在 here, in codesandbox 中找到最小示例。只需单击按钮，就会看到没有显示警报。另外，有一个Accordion组件的注释代码，显然是行不通的。

我想知道...关于为什么会发生这种情况的提示？我的一些想法是函数的绑定，代码的注入（但是 alert 出现在 bundle.js 文件中）...提前致谢!

[编辑] 解决方案

删除主要内容中的捆绑包 html。由于是自动添加的，所以被添加了两次导致出现问题。

- <script src="./bundle.js"></script>

Answer 1

我遇到了同样的问题，请检查 index.html 文件并删除 script 标签。如果您使用 html-webpack-plugin，脚本标签将自动添加到 html 文件。

js事件没有在webpack构建的反应应用程序中触发

js events not firing in webpack built react application

reactjs

webpack

webpack-5