React useWindowSize hook no longer works in project without CRA

Question

This simple hook is supposed to return the window width and height. I made this hook in a project where I used CRA where I faced no issues. In the current project, i have not used CRA in order to get a better understanding of how react works. Therefore, I think the error I receive might have to do with my webpack configs or dependencies.

Uncaught TypeError: can't access property "type", currentEvent is null

import { useState, useEffect } from "react";

export default function useWindowSize() {
    const [windowSize, setWindowSize] = useState({
        width: undefined,
        height: undefined,
    });

    useEffect(() => {
        const handleResize = () =>
            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
        window.addEventListener("resize", handleResize);
        handleResize();
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return windowSize;
}

WEBPACK.CONFIG.JS

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

module.exports = {
    entry: "./src/index.jsx",

    output: {
        path: path.join(__dirname, "/dist"),
        filename: "bundle.js",
    },

    plugins: [
        new HTMLWebpackPlugin({
            template: "./public/index.html",
        }),
    ],

    module: {
        rules: [
            {
                test: /\.jsx|js$/,
                include: path.resolve(__dirname, "src"),
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    targets: "defaults",
                                },
                            ],
                            "@babel/preset-react",
                        ],
                    },
                },
            },
            {
                test: /\.(jpe?g|png|ico|svg|gif)$/i,
                use: {
                    loader: "file-loader",
                    options: { name: "[name].[ext]" },
                },
            },
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
        ],
    },
};

PACKAGE.JSON

{
"name": "cra",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
    "css-loader": "^6.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.1"
},
"devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
}

}

EDIT : I should mention that I receive the window size at the initial render, the error happens when I actually try to resize the window

I tried many things to understand this issue however I am still unsuccesful in solving it. Any assistance would be appreciated.

Answer 1

For anyone facing a similar problem, you need this dependency for useState()

npm install react-refresh -D