引入@azure/msal-browser后Vue项目npm run build失败求助

问题现象 #

执行npm run build时构建失败，报错无法解析@azure/msal-browser包中的.mjs文件：

error in ./node_modules/@azure/msal-browser/dist/event/EventHandler.mjs
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

已尝试的无效配置 #

曾在vue.config.js中添加以下配置，但未解决问题：

chainWebpack: (config) => {
  config.module.rule('javascript/auto').test(/\.mjs$/)
}

排查到的配置差异 #

通过vue-cli-service inspect对比正常运行项目的配置，发现两个关键差异：

1. 当前项目多了一条config.module.rule('mjs')规则，将node_modules中的.mjs文件标记为javascript/auto，跳过了babel-loader处理
2. 当前项目的config.module.rule('js')使用了cache-loader + babel-loader的组合，而正常项目直接使用babel-loader

当前项目的相关webpack配置片段：

/* config.module.rule('mjs') */
{
  test: /\.mjs$/,
  type: 'javascript/auto',
  include: [
    /node_modules/
  ]
},

/* config.module.rule('js') */
{
  test: /\.m?jsx?$/,
  exclude: [
    function () { /* omitted long function */ }
  ],
  use: [
    {
      loader: 'C:\\Users\\bill.youngman\\source\\repos\\CAT-Touchstone\\cat-touchstone-re-ui\\node_modules\\cache-loader\\dist\\cjs.js',
      options: {
        cacheDirectory: 'C:\\Users\\bill.youngman\\source\\repos\\CAT-Touchstone\\cat-touchstone-re-ui\\node_modules\\.cache\\babel-loader',
        cacheIdentifier: '0582bb69'
      }
    },
    {
      loader: 'C:\\Users\\bill.youngman\\source\\repos\\CAT-Touchstone\\cat-touchstone-re-ui\\node_modules\\babel-loader\\lib\\index.js'
    }
  ]
},

正常项目的相关webpack配置片段：

/* config.module.rule('js') */
{
  test: /\.m?jsx?$/,
  exclude: [
    function () { /* omitted long function */ }
  ],
  use: [
    /* config.module.rule('js').use('babel-loader') */
    {
      loader: 'C:\\Users\\bill.youngman\\source\\repos\\CAT-Tools\\cat-edm-reporter\\vuefront\\vuepage\\node_modules\\babel-loader\\lib\\index.js',
      options: {
        cacheCompression: false,
        cacheDirectory: 'C:\\Users\\bill.youngman\\source\\repos\\CAT-Tools\\cat-edm-reporter\\vuefront\\vuepage\\node_modules\\.cache\\babel-loader',
        cacheIdentifier: 'c8f04554'
      }
    }
  ]
}

解决方案 #

在vue.config.js中修改chainWebpack配置，移除多余的mjs规则，并确保.mjs文件能被babel-loader处理：

方案1：保留cache-loader，调整规则 #

chainWebpack: (config) => {
  // 移除自动添加的mjs规则
  config.module.rules.delete('mjs')
  
  // 修改js规则，确保.mjs文件被babel-loader处理
  config.module.rule('js')
    .test(/\.m?jsx?$/)
    .use('babel-loader')
    .loader('babel-loader')
    .tap(options => {
      options.cacheCompression = false
      return options
    })
}

方案2：移除cache-loader，仅保留babel-loader #

chainWebpack: (config) => {
  config.module.rules.delete('mjs')
  
  // 清空现有loader，只保留babel-loader
  config.module.rule('js')
    .uses.clear()
    .use('babel-loader')
    .loader('babel-loader')
    .options({
      cacheCompression: false,
      cacheDirectory: './node_modules/.cache/babel-loader'
    })
}

修改后重新执行npm run build即可解决构建失败问题。

内容的提问来源于stack exchange，提问作者B. Youngman