How to solve "GULP Serve --nobrowser" error on WEBPACK?

Question

After npm run build, then gulp clean and gulp serve --nobrowser just to receive these two errors below:

[09:46:04] Error - [webpack] Error processing webpack stats: TypeError: Cannot read property 'toJson' of undefined [09:46:04] Error - [webpack] Webpack error: TypeError: localizedPath.startsWith is not a function

I have been trying to torubleshoot on my own for a couple days and no search comes up with "toJson" or "startsWith". SO i can't find what this error is catching on...Please help. any help is appreciated.

---Not sure what i should include in here to help the community troubleshoot with me--- But here is the webpack:

var project = require("./package.json");
var path = require("path");

// Return the configuration
module.exports = (env, argv) => {
    var isDev = argv.mode !== "production";
    return {
        // Set the main source as the entry point
        entry: [
            path.resolve(__dirname, project.main)
        ],

        // Output location
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: project.name + (isDev ? "" : ".min") + ".js",
            publicPath: ""
        },

        // Resolve the file names
        resolve: {
            extensions: [".js", ".css", ".scss", ".ts"]
        },

        // Dev Server
        devServer: {
            inline: true,
            hot: true,
            open: true,
            publicPath: "/dist/"
        },

        // Loaders
        module: {
            rules: [
                // SASS to JavaScript
                {
                    // Target the sass and css files
                    test: /\.s?css$/,
                    // Define the compiler to use
                    use: [
                        // Create style nodes from the CommonJS code
                        { loader: "style-loader" },
                        // Translate css to CommonJS
                        { loader: "css-loader" },
                        // Compile sass to css
                        {
                            loader: "sass-loader",
                            options: {
                                implementation: require("sass")
                            }
                        }
                    ]
                },
                // Handle Image Files
                {
                    test: /\.(jpe?g|png|gif|svg|eot|woff|ttf)$/,
                    loader: "url-loader"
                },

                // Handle HTML Files
                {
                    test: /\.html?$/,
                    loader: "raw-loader"
                },
                // JavaScript
                {
                    // Target JavaScript files
                    test: /\.jsx?$/,
                    use: [
                        // JavaScript (ES5) -> JavaScript (Current)
                        {
                            loader: "babel-loader",
                            options: { presets: ["@babel/preset-env"] }
                        }
                    ]
                },
                // TypeScript to JavaScript
                {
                    // Target TypeScript files
                    test: /\.tsx?$/,
                    use: [
                        // JavaScript (ES5) -> JavaScript (Current)
                        {
                            loader: "babel-loader",
                            options: { presets: ["@babel/preset-env"] }
                        },
                        // TypeScript -> JavaScript (ES5)
                        { loader: "ts-loader" }
                    ]
                }
            ]
        }
    };
}

Here is the Package_json:

{
  "name": "msc-assessment-app",
  "version": "2.0.7",
  "private": true,
  "main": "src/index.ts",
  "scripts": {
    "all": "npm run clean && npm run build && npm run prod && npm run spfx",
    "build": "webpack --mode=development",
    "clean": "node ./clean.js",
    "prod": "webpack --mode=production",
    "spfx": "cd ./spfx && npm run package"
  },
  "dependencies": {
    "@microsoft/sp-http": "^1.18.2",
    "@microsoft/sp-webpart-base": "^1.18.2",
    "datatables.net": "^1.13.6",
    "datatables.net-bs5": "^1.13.6",
    "dattatable": "^2.8.3",
    "gd-sprest-bs": "^10.10.40",
    "jquery": "^3.6.1",
    "moment": "^2.29.4"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "babel-loader": "^8.2.5",
    "css-loader": "^5.2.7",
    "file-loader": "^6.2.0",
    "raw-loader": "^4.0.2",
    "sass": "^1.55.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.90.1",
    "webpack-cli": "^4.10.0"
  }
}

My versions:

npm view npm version - 10.4.0

npm view typescript version -5.3.3

npm view webpack version - 5.90.1

Again, any help is greatly appreciated, i have no idea what it is catching on. Thank you so much!
Madeline

cd .. npm run build cd spfx gulp clean gulp serve --nobrowser

what I expected: to test in the browser as i have been. It just for some reason stopped working.