SPFx WebPart创建无本地选项且运行时webpack报错求助

对应症状 #

• 使用yo @microsoft/sharepoint创建WebPart后，本地部件选项未出现
• 浏览器显示异常
• 终端输出Webpack相关错误：

[13:55:54] Error - [webpack] Error processing webpack stats: TypeError: Cannot read properties of undefined (reading 'toJson')
[13:55:54] Error - [webpack] Webpack error: TypeError: Cannot set properties of undefined (setting 'asyncChunks')

解决步骤 #

1. 清理依赖并重新安装

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 执行命令重新安装依赖：

npm install

2. 修复Webpack版本兼容问题

@microsoft/sp-build-web 1.18.2对Webpack版本有特定要求，版本不匹配会触发此类错误。在package.json中添加版本锁定配置：

• 在package.json根节点新增resolutions字段：

"resolutions": {
  "webpack": "^5.76.0"
}

• 安装版本锁定工具并重新同步依赖：

npm install -g npm-force-resolutions
npm-force-resolutions
npm install

3. 严格匹配Node.js版本

确保Node.js版本符合package.json中engines的要求：

• 推荐用nvm切换到指定版本（比如16.x稳定版）：

nvm install 16.20.2
nvm use 16.20.2

• 切换版本后，重复步骤1重新安装依赖

4. 清理构建缓存并重跑构建

gulp clean
gulp bundle --ship
gulp serve

5. 重置项目（极端情况）

如果以上方法无效，重新创建WebPart项目：

yo @microsoft/sharepoint

创建过程中选择正确的模板类型，确认依赖安装无报错后再启动服务。

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