Hey Guys so I'm struggling to set absolute paths in react native I used babel-plugin-module-resolver for that and also set tsconfig.json
and 'babel.config.js' as slowed below and VS code isn't giving any error about path but metro server throwing error like this
BUNDLE ./index.js
error: Error: Unable to resolve module @pages/pokemons/pokemons from D:\Work And Stydy Of IT\ReactNative\RTKTS\src\App.tsx: @pages/pokemons/pokemons could not be found within the project or in these directories:
node_modules
> 1 | import Pokemons from '@pages/pokemons/pokemons';
| ^
2 | import React from 'react';
3 |
4 | function App(): JSX.Element {
at ModuleResolver.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
at DependencyGraph.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph.js:277:43)
at Object.resolve (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\lib\transformHelpers.js:169:21)
at Graph._resolveDependencies (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:473:35)
at Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:261:38)
at async Graph._addDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
at async Promise.all (index 2)
at async Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:322:5)
at async Graph._traverseDependenciesForSingleFile (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:249:5)
at async Promise.all (index 0)
// tsconfig.json
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@app": [
"app/index"
],
"@app/*": [
"app/*"
],
"@services": [
"services/index"
],
"@services/*": [
"services/*"
],
"@pages": [
"pages/index"
],
"@pages/*": [
"pages/*"
],
}
},
"include": [
"src/**/*",
]
}
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'@app': ['app/index'],
'@app/*': ['app/*'],
'@services': ['services/index'],
'@services/*': ['services/*'],
'@pages': ['pages/index'],
'@pages/*': ['pages/*'],
underscore: 'lodash',
},
},
],
],
};
Steps that I tried till now:
node_modules
and yarn.lock
files and re install packages.Before posting this I tried a lot of answers which is available on Google and after that, I'm posting
I think the TypeScript configuration file and the babel.config.js
file needn't index
route name, in my case both configurations were like the following examples:
// tsconfig.json
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@api": ["./api"], // this is for importing index file
"@api/*": ["./api/*"], // this is for importing other files underneath of the api folder
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-reanimated/plugin',
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.ios.tsx',
'.android.ts',
'.android.tsx',
'.ts',
'.tsx',
'.js',
'.jsx',
'.json',
],
alias: {
'@api': './src/api',
},
},
],
],
};
HINT: After the above configuration don't forget to reset your cache:
yarn start --reset-cache