本文详解 react 项目中因相对路径书写错误导致“module not found”报错的问题，重点说明 import 路径必须使用相对路径（如 ./components/map），而非绝对路径（如 /components/map），并提供正确配置与最佳实践。

本文详解 react 项目中因相对路径书写错误导致“module not found”报错的问题，重点说明 import 路径必须使用相对路径（如 ./components/map），而非绝对路径（如 /components/map），并提供正确配置与最佳实践。

在 React 项目中（尤其是使用 Create React App 初始化的项目），所有模块导入路径都必须是相对于当前文件的相对路径，不能以根斜杠 / 开头——这种写法会被 Webpack 解析为系统根目录或 Node.js 模块解析路径，而非项目内的 src/ 目录，因此会触发类似以下的错误：

Module not found: Error: You attempted to import /components/map which falls outside of the project src/ directory.

✅ 正确做法：在 src/App.js 中，应使用 以 ./ 或 ../ 开头的相对路径 导入同项目下的组件：

// ✅ 正确：从当前文件（src/App.js）出发，进入 components 文件夹找到 map.tsx
import Map from "./components/map";

⚠️ 常见错误：

• import Map from "/components/map" → ❌ 错误！/ 表示绝对路径，CRA 不支持自定义 src/ 别名（除非额外配置）
• import Map from "components/map" → ❌ 错误！未加 ./，会被当作第三方 npm 包查找
• import Map from "src/components/map" → ❌ 错误！src 是开发目录，不是可导入的包名

? 额外说明：

• .env 中设置 NODE_PATH=./src 在现代 CRA（v5+）中已被废弃且无效，CRA 默认仅支持 src/ 下的绝对导入需通过 jsconfig.json 或 tsconfig.json 配置路径别名（如 @/*），但不推荐新手过早引入复杂配置。
• 文件扩展名 .tsx 可被自动解析（CRA 支持 TS/JS 混合），无需显式写 .tsx（即 ./components/map 即可，无需 ./components/map.tsx）。

? 推荐的最小可行配置（无需修改环境变量）：

React Native For Android 源码编译 中文WORD版

本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看

下载

1. 确保文件结构清晰：

   src/
   ├── components/
   │   └── map.tsx     ← 默认导出 function Map()
   ├── App.js
   └── index.js

2. 在 App.js 中正确导入并使用：

   import React from 'react';
   import Map from './components/map'; // ✅ 关键修正
   
   function App() {
     // ...其他逻辑
     return (
       <div classname="Page">
         <map></map>
   </div>
     );
   }
   
   export default App;

? 小贴士：

• 若希望支持类似 import Map from '@components/map' 的简洁写法，可在 tsconfig.json（TypeScript 项目）中添加：

  {
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@components/*": ["components/*"]
      }
    }
  }

  并重启开发服务器。但对初学者，坚持使用 ./components/xxx 是最稳定、无配置依赖的方式。

总结：React 组件导入的本质是 基于文件系统的位置关系，务必以当前文件为起点，用 ./ 明确声明相对路径——这是避免 “Module not found” 类错误最直接、最可靠的原则。