配置browser字段后@esri/calcite-components仍报模块未找到错误求助

这个报错是webpack 5对严格ECMAScript模块的解析规则导致的：

• @esri/calcite-components的dist/custom-elements/index.mjs属于严格ESM规范文件，webpack 5要求这类文件中的导入语句必须写全文件后缀
• 该文件内部导入@stencil/core/internal/client时没有携带.js后缀，触发了webpack的全路径校验，导致解析失败
• 你之前配置的package.json的browser字段不生效，是因为路径没有指定对应包名，webpack无法识别你要重定向的是@esri/calcite-components下的文件

• 第一步：修正package.json的browser字段配置，补全包名：

"browser": {
  "@esri/calcite-components/dist/custom-elements/index.mjs": "@esri/calcite-components/dist/custom-elements/index.js"
}

• 第二步：在webpack配置中添加以下规则，关闭对calcite-components相关mjs文件的全路径校验。如果你当前项目是基于webpack-config-single-spa-react的预设配置，使用webpack-merge合并规则即可，不需要修改原有预设配置：

// webpack.config.js
module.exports = {
  resolve: {
    // 确保扩展名包含.mjs
    extensions: ['.js', '.jsx', '.mjs']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules\/@esri\/calcite-components/,
        resolve: {
          fullySpecified: false
        }
      }
    ]
  }
}

• 可选补充：如果上述配置后仍然报错，可以在webpack的resolve.alias中添加stencil内部路径的别名，强制指向正确的文件：

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      '@stencil/core/internal/client': path.resolve(__dirname, 'node_modules/@stencil/core/internal/client/index.js')
    }
  }
}

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