如何解决Webpack环境下gulp serve --nobrowser的报错问题

报错信息 #

[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

环境与操作流程 #

• 操作步骤：
  1. 根目录执行 npm run build
  2. 进入spfx目录：cd spfx
  3. 执行 gulp clean
  4. 执行 gulp serve --nobrowser
• 版本信息：
  • npm: 10.4.0
  • typescript: 5.3.3（项目依赖为4.8.4）
  • webpack: 5.90.1

核心配置文件 #

Webpack配置（webpack.config.js） #

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" }
                    ]
                }
            ]
        }
    };
}

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"
  }
}

排查与解决方案 #

1. 版本兼容性修复 #

• TypeScript版本不一致：项目依赖TS 4.8.4，但系统全局是5.3.3，锁定项目版本：

  npm install typescript@4.8.4 --save-dev --force
  

• npm版本过高：SPFx v1.18.2推荐npm 8.x，降级到兼容版本：

  npm install -g npm@8.19.2
  

• Webpack版本冲突：SPFx自带的Webpack可能与根目录5.90.1冲突，降级到SPFx兼容版本：

  npm install webpack@5.75.0 webpack-cli@4.10.0 --save-dev --force
  

2. Webpack配置调整 #

• 修改output.publicPath为空字符串可能导致路径解析错误，改为根路径：

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

3. 彻底清理缓存与重构 #

# 根目录清理
npm run clean
rm -rf node_modules package-lock.json
npm install
npm run build

# spfx目录清理
cd spfx
gulp clean
rm -rf node_modules package-lock.json
npm install
gulp serve --nobrowser

4. 检查localizedPath变量类型 #

搜索项目中所有使用localizedPath的位置（如SPFx本地化配置、自定义gulp任务），确保其值为字符串类型，避免调用startsWith时变量为undefined或非字符串。

内容的提问来源于stack exchange，提问作者Madeline