React native babel config " Cannot find module 'babel-plugin-module-resolver' " error

Question

I tried to define the path with babel. I am not sure if is it because of it or not but I got this error. But an error showed up after adding packages. I could understand in fact what is the reason so I don't have more explanation and detail. Sorry for that

here are my codes :

module.exports = {

  presets: [['module:metro-react-native-babel-preset','@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript', ],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          components: './src/components',
          assets: './src/assets',
          containers: './src/containers',
          utils: './src/utils',
          api: './src/api',
        },
        extensions: ['.ios.js', '.android.js', '.js', '.json', '.ts', '.tsx'],
      },
    ],
    'react-native-reanimated/plugin',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
  ],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
}

tsconfig.json

    {
  "extends": "@tsconfig/react-native/tsconfig.json" /* Recommended React Native TSConfig base */,
  "compilerOptions": {
    "strict": true,
    "experimentalDecorators": true,
"lib": ["es5", "es6", "dom", "dom.iterable"],
/* Visit https://aka.ms/tsconfig.json to read more about this file */

/* Completeness */
// "skipLibCheck": true,
"typeRoots": ["./node_modules/@types", "./src/utils/types"],
"baseUrl": ".",
"paths": {
  "components/*": ["./src/components/*"],
  "assets/*": ["./src/assets/*"],
  "containers/*": ["./src/containers/*"],
  "utils/*": ["./src/utils/*"],
  "api/*": ["./src/api/*"]
},
"types": ["google-libphonenumber"]
  },

  "include": [
    "src",
    "src/assets/icons/.tsx",
    "src/api/queries/.tsx",
    "src/components/modals/.tsx",
    "src/components/modals/.tsx",
    "node_modules/react-native-redash/lib/typescript/v1/index.d.ts"
  ]
}

and finally in package.json

"devDependencies": {
 "babel-plugin-module-resolver": "^5.0.0",
    "@babel/core": "^7.22.8",
    "@babel/preset-env": "^7.22.7",
    "babel-jest": "^29.6.1",
    "@babel/runtime": "^7.22.6",
}

Answer 1

I also got this error when I was setting up this in my project, then I restarted the metro bundler and it worked.

and one more thing that I can see in your code wrap alies values in an array like ["./src/..."] in Babel.config file like you did in tsconfig.

and why are you not using any alies value like @ or #

for any reference here is my code

Babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'react-native-reanimated/plugin',
      {
        relativeSourceLocation: true,
      },
    ],
    ["dotenv-import", {
      "moduleName": "@env",
      "path": ".env",
      "blocklist": null,
      "allowlist": null,
      "safe": false,
      "allowUndefined": false
    }],
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@assets': ['./src/assets'],
          '@components': ['./src/components'],
          '@config': ['./config'],
          '@navigation': ['./src/navigation'],
          '@screens': ['./src/screens'],
          '@store': ['./src/store'],
          '@utils': ['./src/utils'],
          '@services': ['./src/services'],
          '@actions': ['./src/store/actions'],
        },
      },
    ],
  ],
};

tsconfig.ts

{   "extends": "@tsconfig/react-native/tsconfig.json",
    "compilerOptions": {
        "target": "es2020",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./src",
        "jsx": "react",
        "noImplicitAny": false,
      "paths": {
        "@assets/*": ["./assets/*"],
        "@images/*": ["./assets/images/*"],

        "@components": ["./components"],
        "@components/*": ["./components/*"],

        "@config": ["./config"],

        "@navigation": ["./navigation"],
        "@navigation/*": ["./navigation/*"],

        "@screens": ["./screens"],
        "@screens/*": ["./screens/*"],

        "@store/*": ["./store/*"],

        "@utils": ["./utils"],
        "@utils/*": ["./utils/*"],

        "@services": ["./services"],
        "@services/*": ["./services/*"],
        
        "@actions": ["./store/actions"],
        "@actions/*": ["./store/actions/*"],
      }
    }
  }