Babel-plugin-module-resolver: React Native Typescript Problem: Cannot find module or its corresponding type declerations

[WrathChaos]

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 tho :)

[amirbhz86]

I have this isuue

but when I know Tslint is depreacated
I migrated to Eslint
delete Tslint estension in vscode
and do steps according this site :
https://medium.com/@killerchip0/react-native-typescript-with-eslint-and-prettier-e98d50585627

[WrathChaos]

Actually I don't even use eslint or tslint for the project. This is about the tsconfig.json's paths problem but I could not find a proper solution for that.

[toywang]

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 tho :)

why you are { "@shared-components": "./shared/components" },you can try move braces "@shared-components": "./shared/components" ,

[WrathChaos]

@toywang it does not work without {}, can you write me an example?

[hlspablo]

the paths must map the complete url, like: @shared-components/* rather than @shared-components

[WrathChaos]

Here is the working example:
.babelrc

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

tsconfig.json

// ? Babel Plugin Module Resolver
    "baseUrl": "./src",
    "paths": {
      "@shared-components/*": ["./shared/components/*"],
      "@shared-constants": ["./shared/constants"],
      "@font-size": ["./shared/theme/font-size"],
      "@api": ["./services/api/index"],
      "@fonts": ["./shared/theme/fonts/index"],
      "@colors": ["./shared/theme/colors"],
      "@theme": ["./shared/theme/*"],
      "@services/*": ["./services/*"],
      "@localization" : ["./shared/localization"],
      "@screens/*": ["./screens/*"],
      "@utils": ["./utils/"],
      "@assets": ["./assets/"]
    }