在基于TypeScript与Craco的React项目中支持mjs扩展名文件

TS2307错误本质是两个层面的配置缺失：TypeScript不认.mjs模块、底层webpack解析规则未覆盖.mjs后缀，按以下三步修改即可：

1. 调整TypeScript配置 #

打开项目根目录的tsconfig.json，修改对应配置项：

{
  "compilerOptions": {
    // 保留原有配置，新增/修改以下两项
    "moduleResolution": "Bundler", // TS 5.x以上推荐，低版本可替换为NodeNext
    "allowJs": true
  },
  "include": [
    "src",
    "**/*.mjs" // 新增此行，让TS扫描所有.mjs文件
  ]
}

如果修改后仍报类型错误，在src目录下新建global.d.ts文件，添加全局类型声明：

declare module '*.mjs' {
  const content: any;
  export default content;
}

2. 修改Craco的webpack配置 #

打开根目录的craco.config.js，在原有配置基础上新增webpack规则（原有Tailwind相关配置无需改动）：

module.exports = {
  // 你原有配置（比如style、postcss等Tailwind相关配置）保留，新增以下webpack配置
  webpack: {
    configure: (webpackConfig) => {
      // 把.mjs加入优先解析的后缀列表
      webpackConfig.resolve.extensions = ['.mjs', ...webpackConfig.resolve.extensions];
      // 添加mjs文件处理规则
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        // 处理第三方包的mjs就填/node_modules/，处理自己写的mjs就填/src/，不需要限制就删掉include字段
        include: /node_modules/,
        type: 'javascript/auto'
      });
      return webpackConfig;
    }
  }
}

3. 重启服务验证 #

修改完后删除node_modules/.cache目录清空缓存，重新启动npm start，引入.mjs文件时记得写全后缀（比如import main from './main.mjs'），即可正常识别。

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