React JS向上跳转3层文件夹引入组件路径错误如何解决？

项目目录结构对照：

src
└── COMPONENT
    ├── UI
    │   └── card.js # 目标引入文件
    └── API
        ├── JS
        │   └── display.js # 当前编写引入语句的文件
        └── CSS
            └── display.css

错误原因分析 #

• 相对路径语法错误：向上跳转一级目录的固定写法是../，不存在.../的语法，这是你之前引入失效的直接原因。
• 层级计算错误：你误以为需要向上跳转3层，实际只需要跳转2层即可定位到目标文件：
  1. 从display.js所在的COMPONENT/API/JS/目录出发，第一层../跳转至COMPONENT/API/目录
  2. 第二层../跳转至COMPONENT/目录，该目录下就存在你要找的UI/card.js文件

正确引入写法 #

如果需要保留.js后缀，写法为：

import [你的导入变量名] from '../../UI/card.js'

如果你的项目构建工具支持省略.js后缀，也可以简化为：

import [你的导入变量名] from '../../UI/card'

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