React - onClick not working in any components

Viewed 2102

I'm pretty new to React and I'm having some issues with my project. I feel like I'm going insane, the simplest things are not working as I'd expect them to. Having re-read my code what feels like hundreds of times at this point, I still can't figure out for the life of me what the problem is. Specifically, I was testing a simple button with an onClick function (onClick={() => console.log("test")}). The button renders fine, but clicking it doesn't log anything in the console.

I'm also using Webpack and Express (though I doubt Express is causing any issues at this point).

I've tried searching for similar issues but nothing has helped thus far.

Below is my index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';

import styles from './index.module.scss';

function App() {
    return (
        <>
            <button onClick={() => console.log("Working")} >Test</button>
        </>
    )
}

ReactDOM.render((
    <App />
), document.getElementById('root'));

module.hot.accept();

Here is my index.ejs file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.bundle.js"></script></head>
  <body>
    <div id="root">
    </div>
    <script src="main.bundle.js"></script>
    <% for (var css in htmlWebpackPlugin.files.css) { %>
      <link href=".<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
    <% } %>
  </body>
</html> 

Here's the webpack.config.js:

const path                      = require('path');
const HtmlWebpackPlugin         = require('html-webpack-plugin');
const { CleanWebpackPlugin }    = require('clean-webpack-plugin');
const webpack                   = require('webpack');

module.exports = (env, args) => {
    
    return {
        entry: './src/index.jsx',
        ...(options()),
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
                {
                    test: /\.scss$/i,
                    use: ['style-loader', 'css-loader', 'sass-loader'],
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    type: 'asset/resource',
                },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: ['babel-loader'],
                },
            ],
        },
        resolve: {
            extensions: ['*', '.js', '.jsx'],
        },
        plugins: plugins(),
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true,
        }
    };
};

const plugins = () => {
    const resOut = path.resolve(__dirname, 'dist');

    const plugs = [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [resOut],
            dry: false,
        }),
        new HtmlWebpackPlugin({
            hash: true,
            filename: path.resolve(resOut, 'index.html'),
            template: './src/index.ejs',
        })
    ]

    return plugs;
}

const options = () => {
    
    const ops = {
        mode: 'development',
        devtool: 'eval-source-map',
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            compress: true,
            port: 9000,
            historyApiFallback: true,
            openPage: '',
            hot: true,
            proxy: {
                '/api/**' : {
                    target: 'http://localhost:3000',
                    secure: false,
                }
            },
            allowedHosts: [
                'localhost',
            ]
        },
    };

    return ops;
}

I'm also using this small batch script to run the webpack dev server and start Express:

@echo off
cd %~dp0
start cmd.exe /k npm run serve
start node ./express/app.js
npm run build -- --watch

I'm not sure if this is related, but the React dev tools show that 'App' is rendered 3 times. I'm not sure if that is some quirk with the dev tools or if it may be causing some issues. Again, I've tried to find if anyone has experienced anything similar, but couldn't find anything.

I'm happy to share any other information that might be needed to get to the bottom of this. Thanks in advance for any help you can give.

1 Answers

You're importing index.bundle.js twice , try uncommenting the script in index.ejs since webpack automatically imports it , this should fix your issue

Related