Babel-plugin-module-resolver: Unable to resolve module "./node_modules/react-native/packager/..."

[facuescobar]

I've commented to this Closed issue but I am not receiving any response.

Is there any Github repo where I can find this plugin working on a RN app?

Installing babel-plugin-module-resolver 3.0.0-beta.0 version didn't resolve my problem.

I've tried many times to setup this plugin (on new and old projects) but I always get stuck on the same error.

Now I am trying with a new and clean RN app:

Folder Structure:

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
      [
          "module-resolver", {
              "root": ["./app"],
              "alias": {
                  "comp": "./components",
              },
          }
      ]
  ]
}

Importing components:

Using:
import BlueBox from './components/blue-box';
import OrangeBox from './components/orange-box';

Using:
import BlueBox from 'comp/blue-box';
import OrangeBox from 'comp/orange-box';

Any idea?
Thanks!

[fatfisz]

Hi @fackius, could you link to your repo or prepare one?

[sergeylaptev]

I have the same issue. [email protected] works nearly fine even with latest version of react-native (0.44 at the moment)

My module-alias config looks like this:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-alias", [
      { "src": "./App/Components", "expose": "Components" },
      { "src": "./App/Config", "expose": "Config" },
      { "src": "./App/Constants", "expose": "Constants" },
      { "src": "./App/Helpers", "expose": "Helpers" },
      { "src": "./App/Images", "expose": "Images" },
      { "src": "./App/Navigation", "expose": "Navigation" },
      { "src": "./App/Redux", "expose": "Redux" },
      { "src": "./App/Services", "expose": "Services" },
      { "src": "./App/Theme", "expose": "Theme" }
    ]]
  ]
}

If you're getting an error similar to the screenshot above, this command might help (you need to type it only once)

npm start -- --reset-cache

[tleunen]

Good to know @sergeylaptev.
Would be great to investigate what really change in the path resolution since 1.6

[facuescobar]

@fatfisz
here: https://github.com/fackius/react-native-aliases

[fatfisz]

Thanks, will check it out tomorrow at most.

[fatfisz]

@fackius I'm really sorry, I overestimated my availability and didn't have time to take a look yet. I'll come back to this during the next few days.

[facuescobar]

@fatfisz no worries! Thanks for letting me know that.
I hope you can take a look soon, for now I'll keep using absolute paths to import files, until I get a solution for this!
It would be great to have this plugin working on my projects!

[teoboley]

I was able to fix this issue by adjusting my .babelrc file to this:

{
    "presets": ["react-native"],
    "plugins": [
        ["module-resolver", {
            "cwd": "babelrc",
            "root": ["./dist"]
        }]
    ]
}

It seems that since the react-native packager is changing the cwd, relative paths in babelrc are being resolved to the wrong directory. The cwd flag resets it to the current .babelrc file for the plugin, thus fixing the issue.

Let me know if this works for you

[facuescobar]

Thanks for you answer @teoboley!

That helped a lot!

But, it is (partially) working.

The next code works very well, I can import files using comp alias.

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "cwd": "babelrc",
      "alias": {
        "comp": "./app/components"
      }
    }]
  ]
}

But, it doesn't work when I try to use a root directory, to not set ./app in every alias
Like this:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./app"],
      "alias": {
        "comp": "./components"
      }
    }]
  ]
}

I get this error:

Let me know any question!
Cheers.

[tleunen]

@fackius Setting a root doesn't mean you can remove this part from the alias configuration.

In babel-plugin-module-resolver, setting a root means all path inside that root are automatically aliased.
So if you root ./app, you can automatically use components/MySuperComponent.

If you want both the root and the custom alias for your components directory, you still have to set the full path inside the alias configuration. ./app/components in this case.

To summarize, the path of an alias should always exist, based on the cwd you provide (default is the working directory).

If you think this is not clear in the readme, let me know what made you think root and alias worked together.

[facuescobar]

@tleunen It's super clear now.

Everything seems to be working!
Thank you so much guys!

Ps: Github repository with working example https://github.com/fackius/react-native-aliases 💯