如何让React项目的import默认从src/目录读取文件

问题描述 #

继承的React项目在旧电脑可正常运行，新电脑执行npm start时出现模块找不到错误：

Module not found: Can't resolve 'component/Login.js' in 'src/template/Page.js'

项目中导入组件时省略了src/前缀（如import LoginComponent from 'component/Login.js'），需要配置让构建工具自动从src/目录查找组件。

环境信息 #

• React版本：^16.6.1
• 使用react-scripts管理构建（package.json中scripts为react-scripts start/build/test）
• VS Code配置中已设置compilerOptions.baseUrl: "src"（仅用于编辑器代码提示，不影响构建）

解决方案 #

因为项目基于Create React App（未执行eject），只需在项目根目录创建jsconfig.json文件，配置基础路径即可：

1. 在项目根目录新建jsconfig.json文件
2. 写入以下配置：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

说明 #

• 该配置会告知Create React App内置的Webpack，以src目录为模块查找的基础路径，这样import 'component/Login.js'会自动解析为src/component/Login.js
• VS Code中的baseUrl配置仅用于编辑器的代码提示和跳转，不影响项目构建，必须单独添加jsconfig.json才能让构建工具识别路径
• 配置完成后，重启npm start即可生效，无需修改.env或package.json
• npm版本5.5.1不影响该配置，无需升级

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