Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

reactjs - js events not firing in webpack built react application

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...

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>

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

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"
    })
  ]
};

The package.json is:

"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"
  }

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.

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!

[EDIT] SOLUTION

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...