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