React.js模块无法解析问题求助：新手导入错误排查无果

1. 核对相对路径的准确性 #

• 确认import语句的路径和文件实际位置完全匹配：比如组件在src/components/Button.js，在src/App.js中导入时要写import Button from './components/Button'，开头的./不能省略，否则会被识别为node_modules中的第三方包。
• 注意路径大小写：React打包工具（如Webpack）对路径大小写敏感，即使Windows系统不区分，./Components/button.js和./components/Button.js也会被判定为不同路径。

2. 配置Webpack模块搜索路径（自定义配置场景） #

如果项目使用自定义Webpack配置，可在webpack.config.js中把src目录加入模块搜索范围，简化导入路径：

const path = require('path');

module.exports = {
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

配置后，导入src/components/Button.js可直接写import Button from 'components/Button'。

3. 检查本地模块的package.json配置 #

若把某个目录当作本地模块使用（如src/utils/），需在该目录的package.json中设置正确的main字段，指定模块入口文件：

{
  "main": "./index.js"
}

这样导入时import utils from './utils'就能正确找到入口。

4. 清除缓存并重启开发服务器 #

缓存异常可能导致路径解析错误，执行以下操作：

• 关闭React开发服务器
• 删除node_modules/.cache目录（Create React App项目适用）
• 重新运行npm start

5. 确认文件扩展名配置 #

Webpack默认识别.js、.jsx等扩展名，若使用特殊扩展名，需在Webpack配置中添加对应规则：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.tsx'],
  },
};

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