React组件跨文件导入失败：模块未找到问题求助

你遇到的错误是因为导入路径写法错误，加上create-react-app新版本对NODE_PATH的支持已弱化，按以下方法解决：

方法一：改用相对路径（最直接有效） #

修改App.js中的导入语句，使用相对路径（从App.js所在位置指向map组件）：

// 写法1：省略文件后缀
import Map from "./components/map";

// 写法2：明确指定tsx后缀（避免识别问题）
import Map from "./components/map.tsx";

方法二：配置baseUrl实现优雅的绝对路径 #

如果偏好绝对路径导入，推荐用create-react-app官方支持的baseUrl配置，替代已被弱化的NODE_PATH：

1. 在项目根目录（与src文件夹同级）创建jsconfig.json文件，写入以下内容：

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

2. 重启开发服务器（停止当前npm start后重新启动）
3. 之后即可用绝对路径导入（注意不要加开头的斜杠）：

import Map from "components/map";

若坚持使用NODE_PATH的排查要点 #

如果一定要用NODE_PATH=./src的配置，先确认以下几点：

• .env文件必须放在项目根目录（和src同级），不能放在src文件夹内
• 修改.env后必须重启开发服务器，配置才会生效
• 导入语句不要加开头的斜杠，正确写法是import Map from "components/map"

确认文件结构 #

确保你的文件结构和描述一致：

My-App-Name/
├─ src/
│  ├─ components/
│  │  └─ map.tsx
│  └─ App.js
└─ .env

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