Typescript baseUrl 在 React Typescript 项目中不起作用

Question

我在tsconfig.json 文件中定义了baseUrl：

"baseUrl": "src",

在.eslintrc.js 我有：

parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },

现在在例如index.tsx 我可以导入我的组件，比如import Layout from 'components/layout';

当我运行 gatsby develop 时，我收到一些错误，例如：

If you're trying to use a package make sure that 'components/layout' is installed. If you're trying to use a local file make sure that the path is correct.
error undefined failed

这里缺少什么，为什么找不到我的组件？

Answer 1

你必须在你的.eslintrc.js 中添加import/resolver 设置，这样Webpack 才能识别你的组件的imports（我假设它们有.tsx 扩展名）

settings: {
    'import/resolver': {
      node: {
        paths: [
          'src'
        ],
        extensions: [
          '.ts',
          '.tsx'
        ]
      }
    }
  },