React项目中如何从两级上层的App.jsx文件导入声明的context？

1. 核心错误修正 #

你当前的导入存在三类错误，按优先级修正如下：

• 相对路径语法错误：JavaScript 导入语法中表示上级目录只能用两个点 ../，你写的 .../App 属于无效语法，自然无法识别文件。
• 层级计算错误：你的文件层级对应关系如下：

  src/
  ├── App.jsx
  └── components/
      ├── Carousel.jsx
      ├── Navbar.jsx
      └── screens/
          └── Login.jsx
  

  从 Login.jsx 出发，需要向上跳转两级才能到达 src 目录（第一级跳转到 components 目录，第二级跳转到 src 目录），因此 App.jsx 对应的正确相对路径为 ../../App.jsx。
• 变量名大小写错误：你在 App.jsx 导出的 context 名为 IsLoggedInContext，导入时写小写开头的 isLoggedInContext 会匹配不到导出值，属于拼写错误。

修正后正确的导入语句为：

import { IsLoggedInContext } from '../../App.jsx'

2. 自动补全不显示App的原因 #

你输入 ../ 时，路径指向的是 components 目录，该目录下确实只有 screens、Carousel、Navbar 三个文件/文件夹，VSCode 自然不会提示 App.jsx。当你输入到 ../../ 时，路径指向 src 目录，就会正常出现 App.jsx 的补全选项。

3. 优化方案（可选） #

如果项目层级较深，多层 ../ 容易写错，可以配置路径别名简化导入：

• 如果你用的是 Vite，在 vite.config.js 中添加配置：

  import { defineConfig } from 'vite'
  import path from 'path'
  
  export default defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
  

• 如果你用的是 Webpack/CRA，在 webpack.config.js 或者 jsconfig.json 中配置别名映射，配置完成后就可以用简化写法导入：

  import { IsLoggedInContext } from '@/App.jsx'
  

  别名配置完成后VSCode也会支持别名路径的自动补全。

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