js 事件未在 webpack 构建的 React 应用程序中触发

Question

剧透：我更倾向于 Webpack 问题而不是 React（因为使用简单的 React 应用程序，直接形式create-react-app工作）。但是，它只发生在 React 中......

主要问题是一个简单的事件（例如onClick永远不会执行），这扩展到没有使用 js（手风琴、复杂的导航行为等）。所以以下不起作用：

<button onClick={() => alert("TEST YEAH!")}>Click Me!</button>

使用Button诸如react-bootstrap或之类的库组件时也不会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>

Answer 1

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