Find a way to solve the exception in React Native

[entronad]

Babel-plugin-module-resolver can't work correctly in React Native. One suggested way is to clean the cache:

react-native run-android -- --reset-cache

But in some cases, including mine, running this reset cache command can't solve the problem.

By trying a lot, I find a possible way to solve it: After you have encounted the exception wile running react-native run-android, change the name of any path/file name that you have imported with babel-plugin-module-resolver and of course the corresponding import ... from ... statement, and run:

react-native run-android -- --reset-cache

Then it works correctly！ After that you can change back to the origin path/file name, it still works.

I have tested successfully in several projects. I don't know the reason why this magic method works. Maybe it forces a cache reset in background. I hope this discovery could help.

[tsurumure]

I have the same issue with it. And i don't know why the location is 'node_modules/react-native/scripts/scr/a'

[entronad]

@tsurumure You should define a 'root' like:

[
      "module-resolver",
      {
        "cwd": "babelrc",
        "root": ["./src"],
        "extensions": [".js", ".ios.js", ".android.js"]
      }
],

otherwise the './' in your alias will refer to the actual react-native scripts dir as in your case.

[tsurumure]

Yes, it work. :D Thanks a lot !

[LuisAverhoff]

Been trying to get this plugin to play nicely with react-native for a couple of days now and @entronad example was a huge help(didn't even have to reset the cache by the way). Here is how my .babelrc file looks now.

{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "cwd": "babelrc",
        "root": ["./src"],
        "alias": {
          "@shared": "./src/shared",
          "@screens": "./src/screens",
          "@navigation": "./src/navigation",
          "@components": "./src/components",
          "@assets": "./src/assets"
        }
      }
    ]
  ]
}

Once I got rid of this line

"extensions": [".js", ".ios.js", ".android.js"]

for some reason, it finally started to work. I have no idea why it was necessary for me to remove this line. Maybe somebody else here can enlighten me.

For future readers, I'm running my project on windows 10, react-native v0.55.4 on an android emulator with the API level for the android SDK being 23.

[tannera]

Has anyone gotten this to work with React Native 0.57? If yes, could you share your config?

[LexSwed]

Just small comment my side: I have in babelrc:

{
...
     ["module-resolver",
          {
               "cwd": "babelrc",
               "root": ["./"],
               "alias": {
                    "Components": "./components",
               }
          }
     ]
...
}

when I use it in my code as Components/ComponentName, module-resolver changes paths to ../../../node_modules/react-native/components/ComponentName, even if I add ../../components to alias.

It correctly adds ../../../ and resolves to components/ but in between there is node_modules/react-native that comes from somewhere.

[FE-xiaoJiang]

#224 it's because of the wrong cwd which results in translating the relative dir to a wrong dir

[jpamarohorta]

@tannera were to able to make it work with RN 0.57? I'm having the same issue after upgrading.

[tannera]

@jpamarohorta yes, i forgot what fixed it in the end but my current .babelrc is the following:

Since 0.57 I often have to run "npm start -- --reset-cache" when starting my build to avoid errors.

{
    "presets": [
        "module:metro-react-native-babel-preset",
        "module:react-native-dotenv"
    ],
    "plugins": [
        [
            "module-resolver",
            {
                "cwd": "babelrc",
                "root": ["./app"],
                "extensions": [".js", ".ios.js", ".android.js"],
                "alias": {
                    "test": "./test",
                    "underscore": "lodash"
                }
            }
        ]
    ],

    "env": {
        "production": {
            "plugins": ["transform-remove-console", "ignite-ignore-reactotron"]
        }
    },

    "sourceMaps": true
}