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'
        ]
      }
    }
  },