React项目配置webpack resolve.fallback后仍报fs等模块找不到问题

问题1：Node核心模块fallback配置未生效 #

• 根因：你把resolve.fallback配置错误传入了singleSpaDefaults的入参中，该函数仅识别orgName/projectName等预设参数，自定义的resolve配置不会被合并到最终webpack配置中，导致fallback规则完全未生效。
• 修复方式：将resolve配置移到merge方法的第二个参数，和externals/devServer平级。

问题2：ESM模块路径解析错误 #

• 根因有三个：
  1. 你将calcite组件的路径映射错误配置到了resolve.fallback中，路径映射应该使用resolve.alias配置项才会生效，且映射规则没有带完整包名，无法匹配@esri/calcite-components下的对应文件
  2. webpack5对严格ESM模块默认开启fullySpecified校验，要求导入路径必须带完整后缀，导致@stencil/core的导入解析失败
  3. 默认resolve.extensions未优先匹配.mjs后缀，进一步加剧了ESM模块的解析失败
• 修复前置检查：确认已安装@stencil/core依赖，若未安装执行npm i @stencil/core -S

修复后完整配置 #

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");
const path = require("path");
module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "App",
    projectName: "FirstApp",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    resolve: {
      extensions: ['.mjs', '.js', '.jsx', '.json'],
      alias: {
        // 补全calcite组件的路径映射
        "@esri/calcite-components/dist/custom-elements/index.mjs": "@esri/calcite-components/dist/custom-elements/index.js"
      },
      fallback: {
        "fs": false,
        "path": false,
        "os": false
      }
    },
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          resolve: {
            fullySpecified: false
          }
        }
      ]
    },
    externals: [
      'react',
      'react-dom',
      '@reach/router',
      '@mui/material'
    ],
    devServer:{https:true}
  });
};

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