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

问题描述

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

"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

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

解决方法

您必须在 import/resolver 中添加 .eslintrc.js 设置，以便 Webpack 可以识别 imports 的组件（我假设它们具有 .tsx 扩展名）

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