simplified and fixed webpack config

package.json

@@ -9,8 +9,8 @@
     "node": ">=18.18.0"
   },
   "scripts": {
-    "build": "webpack --config webpack/webpack.config.js --env env=production",
-    "start": "webpack serve --config webpack/webpack.config.js --env env=development --open",
+    "build": "webpack --env env=production",
+    "start": "webpack serve --env env=development --open",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "lint": "eslint 'src/**/*.{js,jsx}'",
@@ -27,7 +27,6 @@
     "@material-ui/icons": "^4",
     "chart.js": "^2",
     "fetch-mock-jest": "^1.5.1",
-    "html-webpack-plugin": "^5.6.3",
     "lodash.isequal": "^4.5.0",
     "node-fetch": "^2.6.1",
     "prop-types": "^15",
@@ -64,6 +63,7 @@
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-testing-library": "^7.1.1",
     "fetch-mock": "9.2.2",
+    "html-webpack-plugin": "^5.6.3",
     "husky": "4.0.10",
     "jest": "29.0.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -84,4 +84,4 @@
       "pre-push": "yarn test"
     }
   }
-}
+}

webpack/webpack.common.js → webpack.config.js

@@ -1,22 +1,30 @@
 const path = require('path');
 const webpack = require('webpack');
-
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-module.exports = {
-  entry: path.resolve(__dirname, '..', './src/index.jsx'),
+const config = {
+  mode: 'development',
+  entry: path.resolve(__dirname, './src/index.jsx'),
   resolve: {
     extensions: ['.js', '.jsx'],
   },
+  devtool: 'eval-source-map',
+  devServer: {
+    port: 5000,
+    historyApiFallback: true,
+  },
   module: {
     rules: [
       {
         // should use babel-loader for all js and jsx files
-        test: /\.(ts|js)x?$/,
+        test: /\.jsx?$/, // Match .js and .jsx files
         exclude: /node_modules/,
         use: [
           {
             loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-react'], // For JSX
+            },
           },
         ],
       },
@@ -32,20 +40,30 @@ module.exports = {
       },
       {
         test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
-        type: 'asset/inline',
+        type: 'asset',
       },
     ],
   },
-  output: {
-    path: path.resolve(__dirname, '..', './build'),
-    filename: '[name].[chunkhash].js',
-  },
   plugins: [
     new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, '..', './public/index.html'),
+      template: path.resolve(__dirname, './public/index.html'),
     }),
     new webpack.DefinePlugin({
       'process.env.REACT_APP_DASHBOARD': JSON.stringify('awfy'),
     }),
   ],
 };
+
+module.exports = (env) => {
+  if (env.env === 'development') {
+    config.mode = 'development';
+    config.devtool = 'eval-source-map';
+  }
+
+  if (env.env === 'production') {
+    config.mode = 'production';
+    config.devtool = 'source-map';
+  }
+
+  return config;
+};