CODEWITHSUNDEEP
reactjs
Bartek
Bartek

Reputation: 103

onClick event not firing in React.js

Im having very iritating issue. I've never had this one before.

onClick in this component and in others components also is not working at all. In devTools I can see that event is attached to particular DOM element, but clicking on it does not initiate any action. I dont see my output in console. Im using webpack in this case, and I have fear that it may have wrong configuration, so Im attaching also webpack.config.js and package.json file.

  import React from "react";
    
    const Controls = () => {
      const playMusic = () => {
        console.log("play");
      };
    
      const prevSong = () => {};
    
      const nextSong = () => {
        console.log("next");
      };
    
      return (
        <div className="player-controls">
          <i className="fas fa-backward" onClick={prevSong} id="prev" title="Previous"></i>
          <i className="fas fa-play-circle main-button" onClick={playMusic} id="play" title="Play"></i>
          <i className="fas fa-forward" id="next" onClick={nextSong} title="Previous"></i>
        </div>
      );
    };
    
    export default Controls;

webpack.config.js

  const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

config = {
  entry: "./App/App.js",
  devServer: {
    hot: true,
    port: 3000,
    contentBase: path.join(__dirname, "App")
  },

  output: {
    filename: "bundled.js",
    path: path.resolve(__dirname, "App")
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "App", "index.html")
    })
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
          }
        }
      },

      {
        test: /\.mp3$/,
        loader: "file-loader"
      }
    ]
  },

  mode: "development"
};

module.exports = config;

and package.json

{
  "name": "music-player-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Upvotes: 0

Views: 1131

Answers (1)

Bartek
Bartek

Reputation: 103

SOLUTION:

The problem stems from using html-webpack-plugin which apparently adds his own tag in index.html. Removing the script tag from index.html solved my issue.

Upvotes: 2

Related Questions