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