SPFX React扩展构建报错：Module Parse Failed（botframework-webchat相关）

云上老周

2026-7-4

解决SPFX Extension集成botframework-webchat@4.9.0时的「Module Parse Failed」错误

问题原因

botframework-webchat@4.9.0依赖中包含ES模块格式的文件（如.mjs），而SPFX默认的webpack配置未对这类文件配置对应的解析loader，导致执行gulp build时触发「Module Parse Failed」错误。删除node_modules和package-lock.json重装依赖仅能保证依赖完整性，无法解决webpack配置缺失的问题。

解决方案步骤

安装必要的依赖loader
执行以下命令安装babel相关loader，用于转译ES模块文件：
```
npm install babel-loader @babel/core @babel/preset-env --save-dev
```

自定义SPFX的webpack配置
修改项目根目录的gulpfile.js，添加对ES模块文件的解析规则：

const build = require('@microsoft/sp-build-web');

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    // 处理node_modules中的.mjs文件
    generatedConfiguration.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto'
    });

    // 对botframework-webchat相关文件进行babel转译
    generatedConfiguration.module.rules.push({
      test: /\.(js|mjs)$/,
      exclude: /node_modules\/(?!botframework-webchat)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    });

    return generatedConfiguration;
  }
});

build.initialize(require('gulp'));