Cannot find module '...' or its corresponding type declarations React Typescript Ошибка для использования псевдонима пути alias

Cannot find module '...' or its corresponding type declarations

Возникает для строки:

import SortSign from '@app-universal/SortSign';

Задача

Рассмотрим решение для следующей ситуации, компонент без псевдонимов имопртируется так (в какой-то из родительских компонентов):

import SortSign from '../../../universal/SortSign';

а требуется его импортировать так:

import SortSign from '@app-universal/SortSign';

или так:

import SortSign from 'test/SortSign';

Таким образом, зададим для тренировки сразу два псевдонима ( @app-universal и test) для одного и того же пути.

Решение

Необходимо поправить согласованным образом сразу два файла:

• tsconfig.js (обычно лежит в корне проекта) -- в нем нужно редактировать именно секцию compilerOptions, в неё нужно добавить/отредактировать секцию paths, например:
  

   
     "paths": {
        "@app-universal/*": [
          "components/universal/*"
        ]
      },
  

  Конечный результат (весь файл) может выглядеть как-то так:

  {
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react",
      "baseUrl": "./src",
      "paths": {
        "@app-universal/*": [
          "components/universal/*"
        ],
        "test/*": [
          "components/universal/*"
        ],
      },
    },
    "include": [
      "src"
    ],
  }
  

• webpack.config.js -- (в моем случае он извлекался с помощью eject и теперь лежит в папке config/ относительно корня проекта) в нем правим подраздел секции resolve:
  

   resolve: {
  // ...........
        alias: {
          // Support React Native Web
          // https://www.smashingmagazine.com/2016/08...
          'react-native': 'react-native-web',
          // Allows for better profiling with ReactDevTools
          ...(isEnvProductionProfile && {
            'react-dom$': 'react-dom/profiling',
            'scheduler/tracing': 'scheduler/tracing-profiling',
          }),
          ...(modules.webpackAliases || {}),
          '@app-universal':  path.resolve(__dirname, '../src/components/universal/'),
          'test':  path.resolve(__dirname, '../src/components/universal/'),
        },
  // ...........
      },

  -- здесь две точки в начале пути ../src/components/universal/ связаны с помодъемом на уровень выше в моем случае, т.к. у меня webpack.config.js лежит не в корне проекта (учитывайте этот момент для вашего конкретного случая).