js 事件未在 webpack 构建的 React 应用程序中触发 [英] js events not firing in webpack built react application

问题描述

剧透:我倾向于 Webpack 问题而不是 React(因为使用简单的 React 应用程序，采用直接形式 create-react-app 事情有效).但是，它只发生在 React...

Spoiler: I am leaning towards a Webpack issue rather than React (since with a plain React app, taken straight form create-react-app things work). But still, it only happens with React...

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

The main issue is that a simple event (e.g. onClick is never getting executed), this extends to no js being used (accordions, complex nav behavious, etc.). So the following does not work:

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

在使用诸如 react-bootstrap 或 semantic-ui-react 之类的库的 Button 组件时都不会(在两者中进行测试).

Neither does it when using the Button component of libraries such as react-bootstrap or semantic-ui-react (tested in both).

webpack 配置如下:

The webpack config looks like:

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 组件有一些注释代码，这显然不起作用.

You can find the minimal example in here, in codesandbox. Just click the button and see that there is not alert being shown. In addition, there is some commented code for an Accordion component, which obviously does not work.

我想知道...有关为什么会发生这种情况的任何提示?我的一些想法是函数的绑定、代码的注入(但 alert 出现在 bundle.js 文件中)...提前致谢！

I was wondering... any tips on why is this happening? Some of my thoughts were the binding of the function, the injection of the code (but the alert appears in the bundle.js file)... Thanks in advance!

解决方案

删除包含在主 html 中的包.由于它是自动添加的，因此被添加两次并导致问题.

Remove the bundle inclusion in the main html. Since it is added automatically, it was being added twice and causing problems.

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

推荐答案

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

I had the same issue, please check the index.html file and remove the script tag. If you are using the html-webpack-plugin, the script tag will be added to the html file automatically.

这篇关于js 事件未在 webpack 构建的 React 应用程序中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！