React-native: Unable to resolve module

[tedjames]

Description

Unfortunately, I’ve run into a devastating bug that prevents me from loading any new modules into my app. I first discovered this bug when reaching the part of a react native course by Stephen Grider where he goes into networking with Axios.

After installing Axios with NPM, I imported it, saved index.ios.js, and refreshed the simulator. After refreshing I was greeted with the message shown below:

Whenever I removed the import statement for Axios and refreshed, the error would go away:

Reproduction

To reproduce this, I'd suggest building the app with NPM and/or Yarn running on Node 4.7 or the latest LTS release, Node 6.9.2

I can provide a repository later today if that would help...

Solution - _just a workaround..._

Try this:

1. Click "Reset content and settings..." in the simulator's drop down menu and confirm
2. Close the simulator after it reloads
3. Close the terminal window running watchman
4. Run the following commands within terminal inside of your project's directory:

watchman watch-del-all
rm -rf ./node_modules
npm cache clean
yarn cache clean
rm -rf $TMPDIR/react-*
yarn install
npm cache clean
yarn cache clean
yarn add uuid

If you don't have yarn installed, run these commands instead:

watchman watch-del-all
rm -rf ./node_modules
npm cache clean
rm -rf $TMPDIR/react-*
npm install
npm cache clean
npm install uuid

1. Rebuild the project inside of Xcode and be sure to make any suggested modifications prior to running the app.

Additional Information

• NPM version: 2.15.9 -> 4.0.3 (just updated to the latest version and the bug remains)
• Yarn version: 0.17.10
• Xcode version: 8.2 (8C38)
• React Native version: 0.39.2
• Platform: iOS
• Operating System: MacOS Sierra 10.12.2

I was really excited to finally get started with React Native but this bug absolutely kills my ability to proceed with any tutorials/courses. I'd really appreciate if someone could help me out with this.

Thanks :)

[lacker]

I'm glad you solved it - thanks for also posting the solution here to help other folks!

[tedjames]

Hey @lacker, I'm still experiencing this issue. Unfortunately, the solution I provided above is more of a workaround. Anytime I install a package with npm or yarn on any project, I have to go through the steps above and more often than not, also restart my Macbook.

[ouzhou]

@tedjames I have encountered the same problem

[ThunderBeard]

@tedjames I have the same issue and thank you for posting a solution/workaround. But being the N00b I am I need some more instructions to how I run the commands you suggest. I try to use them in the CMD in my project folder, but get the response that commands are not recognized... Could someone elaborate the instruction please?

Thank you in advance

[ouzhou]

@ThunderBeard, rm -rf is not work in windows

[ThunderBeard]

Thanks, so are there any instructions for windows then?

[ouzhou]

I find a better way to solve your problem, you can use git bash to run those commands

[tedjames]

Hey, @ThunderBeard and @ouzhou, what operating systems are you guys on? I have a feeling that this issue can be reproduced on Windows as well: #11772

[tedjames]

Found another case similar this running on MacOS: #11257

[jussisaurio]

This happens to me too now. Problem started with Axios for me as well.

[anthony-skr]

This happens to me too with Axios / RN 0.40.

[agarcia17]

same thing here. on Windows - Axios / RN 0.40
But the same project runs fine on my Mac (both Android emulator and iOS simulator)

[boyney123]

Nothing seems to work for me, trying to install about 10 different XML parsers in R.N and just getting this error message.

Anybody got any more solutions, almost tried everything :/

[GantMan]

Solved but in a terrible way

TL:DR; use this in your package.json for now

    "axios": "infinitered/axios#windows_friendly",

For some reason packager traces down a require inside a conditional, but only on Windows machines! How? I have no clue. Perhaps @cpojer / @ide _et al._ can illuminate how this could be? This require should never be called, but somehow it is traversed by packager.

Using my branch in npm (which comments out the offending require) fixes everything.

This issue in other tickets

• Axios repo is tracking the issue here: https://github.com/mzabriskie/axios/issues/648
• Another react-native ticket has been opened here: #11887
• For those of you having this problem in apisauce: tracked here (https://github.com/skellock/apisauce/issues/47), you can get around this by using this branch, that uses the aforementioned branch.

    "apisauce": "infinitered/apisauce#windows_friendly",

I wouldn't mind hearing the solution to this. I'm sure @skellock (who helped me track this down) wouldn't mind seeing the solution either.

[tedjames]

Problems just went away for me recently and for no apparent reason. Not too sure what I've done different besides the fact that I've tried RN 0.38 thru 0.40.

[rubennorte]

Hi, I'm an Axios contributor. This conditional require works because when the compilation target of the bundle is web the http adapter is replaced with the xhr one. See https://github.com/mzabriskie/axios/blob/68ec2abc4a74777f746824b5595d58e07b44c119/package.json#L72

Has there been any change in the way RN resolves that?

[skellock]

Yes. In 0.37 there was reorganization of these files (maybe when the bug arrived?).

Recently this PR fixing path.sep issues by @jhen0409 was accepted and merged into 0.41.0-rc-0.

Looks like we're good when 0.41 ships? I can confirm this weekend, but hopefully someone beats me to it.

Thanks all! I learned a lot here.

[Thibaut-Fatus]

We still have problems resolving new libraries on 0.41, manually installing the dependency or resetting content and settings in the simulator sometimes helps, but it seems it is not yet fixed

EDIT : all dependencies need to be declared / installed in react-native app directory, not in some parent directory, even if react-packager tells us he looks into others directories.

[nhuthuynh]

i fixed the problem by following the workaround then install locally react-native, react and react-native-animatable which is the package cannot be resolved. Hope this help !

{ "name": "DinoBounce", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "15.4.2", "react-native": "0.41.2" }, "devDependencies": { "babel-jest": "18.0.0", "babel-preset-react-native": "1.9.1", "jest": "18.1.0", "react": "^15.4.2", "react-native": "^0.41.2", "react-native-animatable": "^1.1.0", "react-test-renderer": "15.4.2" }, "jest": { "preset": "react-native" } }

[davezuch]

@tedjames why the yarn add uuid in your fix?

[maieonbrix]

Hi everyone, maybe it can help, I was having this issue because I was using a package that uses some nodejs utilities which are available on the global object.
In other word, this package could only work in a nodejs env like and not within' the react-native env. It was my mistake.

Hope it helps

[sw-tt-vipulparmar]

move your project to another path

[PrimeLens]

This is happening with me on a mac. Have reduced my project to a simple hello world that imports events from 'events' and error still occurs, the work around in the original post is not working even with a restart of the machine.
npm 4.2.0 and node v7.10.0
react-native-cli: 2.0.1 and react-native: 0.45.1
MacOSSierra 10.12.4 and xcode 8.3.2

note: this has nothing to do with axios, same bug though

[tedjames]

@whoadave The yarn add uuid was unnecessary in hindsight. Just noticed a warning in my console asking to use uuid instead of node-uuid.

@PrimeLens Try wiping the cache of everything you listed, then uninstall and reinstall everything to their latest versions if possible. This includes xcode, rn-cli, rn, and node. Then start your project from scratch in a completely new directory. Be sure to set privileges to everyone on all directories and sub-directories within your project.

[PrimeLens]

@tedjames good lord that solution makes this feel like the dark ages!!! Ii'll try as you suggest, thanks for your response

[PrimeLens]

this has nothing to do with axios, same bug though

[moonvader]

Same bug :(
I tried to use React Native and as I see there are many people like me that can't run simple project. If it is so hard to start - what will be in future?

[hellomarcoliver]

Still, this does not work for me. Any help is much appreciated. Check out my repository here: https://github.com/hellomarcoliver/ReactNativeUIs/tree/master/Jobs

Error:

[epenabella]

I had a similar issue. Maybe mine seems stupid, but the guide I was using was telling me to create an artifacts folder for the compiled .js files. But after I stopped the output of compilation going elsewhere, like the artifacts folder, and instead, just left the output of compiled .js files next to the .tsx files this problem went away instantly.

In other words, have your compiled .js files next to your .tsx files and this might fix your problem :)

[11reed]

This is so frustrating & annoying, the only thing that works for me is to create a completely new project & move my files over. Are there any updates on this?