Path not recognized when building - Unable to resolve module ... could not be found within the project

[GlisboaDev]

I'm trying to put together a monorepo project with react-native, typescript and get relative imports working and keep getting the following error: Unable to resolve module `@screen/XXX` from `packages/project1/src/...`: @screen/XXX could not be found within the project I noticed https://github.com/tleunen/babel-plugin-module-resolver/issues/276 sounds similar to what I'm experiencing, but I don't have any env related configuration and I can reproduce it even in the debug environment.

First, my mono repo structure is:

-root
--packages
----project1
------src
----project2
------src
...

I managed to get it all working on development environment, but have some weird behaviours happening:

• If I run yarn workspace project1 run start // yarn workspace project1 run ios everything works fine as mentioned, but running only run yarn workspace project1 run ios fails to load the path giving the error above (likely because the packager is started from Xcode with a different working directory?)
• If I run./gradlew assemble... from the android folder, it also gives the same error above.
• If I corrupt the babel.config.js file (say add {!@#$: !@#, ...}) and run ./gradlew assemble nothing seems to change

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./packages/project1/src/'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@': './packages/project1/src',
          '@screen': './packages/project1/src/screen',
          '@util': './packages/project1/src/util/*',
          '@nav': './packages/project1/src/navigation/*',
          '@component': './packages/project1/src/component/*',
        },
      },
    ],
    'babel-plugin-styled-components',
  ],
};

Resolver version: "babel-plugin-module-resolver": "^4.0.0",

Any ideas on what might have been happening or what am I missing?

[marqroldan]

Hey there, I think we have a similar problem. After adding the root and extensions (it was initially only alias) because I was trying to migrate to Typescript (and it was written in reactnative.dev) suddenly imported modules are undefined, after hours of debugging I found out by chance that removing root and extensions fixed the issue.

I actually just fixed it just now, I hope there are no other problems

Probably similar issue: https://github.com/tleunen/babel-plugin-module-resolver/issues/387

[Hirurgo]

https://github.com/facebook/react-native/pull/29477#issuecomment-678321522

[amirbhz86]

I have this isuues 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

[GrEg00z]

to fix it, on RN 0.63.4, I replaced the file babel.config.js by .babelrc, and then in that file :

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@components": "./src/components",
          "@views": "./src/views",
          "@styles": "./src/styles"
        }
      }
    ]
  ]
}

To do an import :

import {styles} from '@styles/<your_file_name>';

EDIT :

Finally, it seems the only problem I had to make the plugin works, without the need to replace babel.config.js by .babelrc, is to launch the command : react-native start --reset-cache

Also, the alias can be named without the "@", it will still worked :

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        [
          "module-resolver",
          {
            "root": ["./"],
            "alias": {
              "components": "./src/components",
              "views": "./src/views",
              "styles": "./src/styles"
            }
          }
        ]
      ]
  };

Then you can write the import like that : import {styles} from 'styles/<your_file_name>';

[FrederickEngelhardt]

Ugh so in our case everything was working for react-native but the e2e part wasn't resolving the alaises.

Solution for webdriverio + appium is in your wdio.config.js add the following config to the top level object.

exports.config = {
  ...rest of your config
  jasmineNodeOpts: {
    ...other config
    helpers: [require('@babel/register')({
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    })]
}

Adding the extensions fixes the file path resolution for the import aliases.

[neildevas]

The plugin configuration that @GrEg00z mentioned worked for me with react-native 0.64.1. Like he mentioned, you can keep your .bable.config.js and make sure you restart the metro cache

[snicro]

to fix it, on RN 0.63.4, I replaced the file babel.config.js by .babelrc, and then in that file :

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@components": "./src/components",
          "@views": "./src/views",
          "@styles": "./src/styles"
        }
      }
    ]
  ]
}

To do an import :

import {styles} from '@styles/<your_file_name>';

EDIT :

Finally, it seems the only problem I had to make the plugin works, without the need to replace babel.config.js by .babelrc, is to launch the command : react-native start --reset-cache

Also, the alias can be named without the "@", it will still worked :

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        [
          "module-resolver",
          {
            "root": ["./"],
            "alias": {
              "components": "./src/components",
              "views": "./src/views",
              "styles": "./src/styles"
            }
          }
        ]
      ]
  };

Then you can write the import like that : import {styles} from 'styles/<your_file_name>';

I take it that babel.config.js has to be in the root of the monorepo, right? And the alias paths would be like in the question: './packages/project1/src/components' instead of './src/components'? With this setup i get the same error, no matter how many times I clean the cache.

[GrEg00z]

@snicro : I do not use a monorepo so I can't tell you if my config will work for you, but yes the babel.config.js is on the root of my project. I will suggest you to add a babel.config in each of your projects, but not sure this is what you looking for

[thucltzigvy]

I faced with same issue. The solution is adding extentions like this (not required to change babel.config.js to .babelrc)

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
        ],
        alias: {
          test: './test',
          underscore: 'lodash',
        },
      },
    ],
  ],
};

[bombillazo]

How is this solved if the babel.config.js file is not at the root of the project but inside the monorepo app directories?