React Native Typescript babel-plugin-module-resolver 错误：找不到模块或其对应的类型声明

Question

I can use the module resolver with Javascript without any problem. Actually I can use it with Typescript without problem on runtime but on developing part I could not find the solution of Cannot find module or its corresponding type declerations problem. I'm looking for an answer which part am I doing it wrong?

Here are the files:

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": [
          { "@shared-components": "./shared/components" },
          { "@shared-constants": "./shared/constants" },
          { "@shared-theme": "./shared/theme" },
          { "@font-size": "./shared/theme/font-size" },
          { "@api": "./services/api/index" },
          { "@fonts": "./shared/theme/fonts/index" },
          { "@colors": "./shared/theme/colors" },
          { "@theme": "./shared/theme/index" },
          { "@services": "./services" },
          { "@screens": "./screens" },
          { "@utils": "./utils/" },
          { "@assets": "./assets/" }
        ],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    ]
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    // ? Custom ones
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    // ? Babel Plugin Module Resolver
    "baseUrl": "./src",
    "paths": {
      "@shared-components": ["./shared/components"],
      "@shared-constants": ["./shared/constants"],
      "@shared-theme": ["./shared/theme"],
      "@font-size": ["./shared/theme/font-size"],
      "@api": ["./services/api/index"],
      "@fonts": ["./shared/theme/fonts/index"],
      "@colors": ["./shared/theme/colors"],
      "@theme": ["./shared/theme/index"],
      "@services": ["./services"],
      "@screens": ["./screens"],
      "@utils": ["./utils/"],
      "@assets": ["./assets/"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Usage in .tsx file

import HomeScreen from "@screens/home/HomeScreen";
import SearchScreen from "@screens/search/SearchScreen";
import DetailScreen from "@screens/detail/DetailScreen";

The error

Thank you for the helping :)

Answer 1

The way of mapping paths in your configuration doesn't look right. The right one is supposed to be:

paths": {
  "@screens/*": ["./screens/*"], // You need to specify prefix `/*` as well
  // others ...
}