如何修复React JS项目npm run build编译失败问题

问题表现 #

• 执行生产构建命令npm run build时，输出Creating an optimized production build...后直接提示Failed to compile，构建终止
• 抛出核心错误信息：

Module not found: Error: Can't resolve './App' in '/Users/qadeer/Desktop/Khazan/guardman/src'
Did you mean 'App.js'?
BREAKING CHANGE: The request './App' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

错误原因 #

当前项目遵循严格ECMAScript Module（ESM）解析规则，触发场景通常为以下任意一种：

• 项目根目录package.json中声明了"type": "module"
• 涉及解析的文件后缀为.mjs
• 相关文件被服务识别为javascript MIME类型的标准ESM模块

严格ESM规范要求所有本地模块导入路径必须写全文件扩展名，不支持CommonJS规范下省略后缀自动匹配文件的逻辑，因此写import App from './App'时，构建工具不会自动寻址同目录下的App.js文件，直接抛出解析失败。

修复方案 #

根据项目需求二选一即可：

方案1：补全导入路径扩展名（符合ESM规范，推荐） #

找到src目录下所有引入App组件的文件，将原省略后缀的导入语句：

import App from './App'

修改为带完整后缀的写法：

import App from './App.js'

如果项目中存在其他本地导入省略后缀的写法（比如导入自定义组件、工具函数时没写.js/.jsx等后缀），统一补全对应扩展名即可彻底解决同类问题。

方案2：调整模块解析配置，兼容省略后缀写法 #

如果不想批量修改现有导入语句，可以调整配置关闭严格路径解析要求：

1. 若项目不需要强制使用ESM规范，直接打开根目录package.json，删除"type": "module"配置项，即可恢复CommonJS风格的自动后缀解析逻辑
2. 若项目需要保留ESM规范，可修改构建工具配置，添加自动解析的后缀列表。以webpack为例，在配置文件的resolve.extensions字段中加入项目用到的文件后缀：

module.exports = {
  // 其他配置项
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  }
}

如果是使用react-scripts的CRA项目，可通过craco或eject方式修改对应webpack配置。

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