Typescript baseUrl not working in React Typescript project

Question

I defined the baseUrl in my tsconfig.json file:

"baseUrl": "src",

In .eslintrc.js I have:

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

Now in eg index.tsx I can import my components like import Layout from 'components/layout';

When I run gatsby develop I get some errors like:

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

What's missing here, why it isn't finding my components?

Answer 1

You have to add import/resolver settings in your .eslintrc.js so Webpack can identify imports of your components (I'm supposing that they have .tsx extension)

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