js events not firing in webpack built react application

Question

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>

Answer 1

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.