tsconfig.json 仅在某些时候遵守 baseUrl 绝对导入

Question

我的 create-react-app 在某些文件中支持绝对导入，但在其他文件中不支持。

文件夹结构

.
+-- tsconfig.js
+-- package.json
+-- src
|   +-- components
|   |   +-- ui
|   |   |   +-- Button
|   |   |   |  +-- Button.tsx
|   |   |   +-- Card
|   |   |   |  +-- Card.tsx
|   +-- pages
|   |   +-- Home.tsx
|   +-- index.tsx

tsconfig.json


{
  "baseUrl": "src",
  "include": [ "src/**/*" ],
}

如果我从 Home.tsx 文件中导入 Button，它会按预期工作：

Home.tsx

import Button from 'components/ui/Button/Button.tsx'
console.log(Button)

（Button 正常登录控制台。）

Card.tsx

但是，如果我尝试从 Card.tsx 导入 Button，则会出错。

import Button from 'components/ui/Button/Button.tsx'
console.log(Button)

错误

FAIL Failed to compile
./src/components/ui/Card/Card.tsx
Module not found: Can't resolve 'components' in '/Users/ninja/Desktop/Projects/My Apps/app-one/src/components/ui/Card/Card.tsx'

我花了几个小时研究类似的情况，并试验了 baseUrl、include 和其他 tsconfig.json 配置的多种组合，但 无法找出问题所在！ 感谢您的帮助。

Answer 1

我的猜测是您的 tsconfig.json 结构不正确（根据您的样本，您做得不对，或者您没有发布整个 tsconfig.json 文件）或者它是位置不对。

将 tsconfig.json 放入项目的根文件夹中（与 package.json 相同）
确保您的 tsconfig.json 结构如下：

tsconfig.json

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

注意"include"的位置。跟"baseUrl"

不在一个层次

这是我根据您项目的 folder/file 结构为您制作的 working demo。

注意： 最后一件事。 linter 警告我 An import path cannot end with a '.tsx' extension. Consider importing 'components/ui/Card/Card' instead.ts(2691)... 这意味着您也应该从导入路径中删除 .tsx 扩展名。

tsconfig.json 仅在某些时候遵守 baseUrl 绝对导入

tsconfig.json honoring baseUrl absolute imports only some of the time

javascript

typescript

reactjs

tsconfig

package.json

文件夹结构

tsconfig.json

错误