[Workarounds] Packager unable to resolve module from /Users/node_modules/

[satya164]

There are various issues scattered around the repo related to this issue. Basically what happens is, for some packages, when you try to require some-module in a file, for example,

var someModule = require('some-module');

It is unable to resolve the package and the following error appears,

Unable to resolve module some-module from /Users/username/projectname/AwesomeProject/index.js: Invalid directory /Users/node_modules/some-module

This error message is a symptom of the packager not being able to find some-module. It'll walk up the directory tree until it finds node_modules/some-module. It just so happens that /Users is the last directory to try, hence the weird /Users/node_modules directory in the error message (h/t @philikon).

Workarounds

Currently, the workarounds seem to be,

• Delete the node_modules folder - rm -rf node_modules && npm install
• Reset packager cache - rm -fr $TMPDIR/react-* or node_modules/react-native/packager/packager.sh --reset-cache
• Clear watchman watches - watchman watch-del-all
• Recreate the project from scratch

[brentvatne]

cc @amasad

[amasad]

cc @martinbigio @davidaurelio @cpojer

[amasad]

That's really strange. Next time it happens can you list your watch roots? watchman watch-list

[martinbigio]

Do we have a consistent repro case? I've experienced this too.

[Hybrid-Force]

Same problem here on version 0.17.0.

$ watchman watch-list
{
    "version": "3.8.0",
    "roots": []
}

[arypurnomoz]

I also got this problem when requesting for platform=ios

[udnisap]

Do we have a way to recreate this? Any steps that might recreate.

[sgonyea]

I suspect that this is actually an npm bug. It seems that npm is secretly deleting installed packages in my project's node_modules directory, when I install an unrelated package. When it blows up with an error, it references /Users/node_modules/ because (I'm guessing) it's just searching up the directory tree 3-4 levels before giving up.

re-running npm install <module> —save for each of the missing modules fixes this issue for me.

edit: My guess is that React Native's complex dependency structure is just exposing npm's bugs.

edit 2: Yeah, you pretty much want to blow away your project's node_modules directory and do a fresh npm install. I think the issue is extra common if you depend on modules that React Native also depends on (say, lodash). npm just gets into a weird state with all the, ahem, flux :).

[udnisap]

Is this only seen in npm 3?

npm 3 uses flat dependency structure. essentially node_modules are not resides in individual packages but only on the top level. if we have references like {somepackage}/node_modules/... we will have issue. Does it ring any bells?

[sgonyea]

I'm using npm 3.5.2. I'm not sure if it applies to npm 2.

[amasad]

I don't think we've tested on npm 3. Although the node resolution algorithm (which we implement) should still work. Are all of you seeing this using npm 3?

[Hybrid-Force]

@amasad No, I am using npm v2.14.7

[pcottle]

👍 I'm seeing this too with npm 2.14.15 and node v5.1.0. I eventually got a fix by following @sgonyea's advice -- blew away the react-native npm module and reinstalled.

Interestingly none of:

• watchman watch-del-all
• rm -rf $TMPDIR/react-packager-*

fixed it for me. I experienced this after switching between two different React Native projects (one that relies on an older version). I ran the packager for both so maybe that will be part of the repro? It's not clear.

Either way I'm unblocked but this seems like a pretty nasty but. And googling for it yields a bunch of unrelated issues :P

[skevy]

@pcottle and whoever else is/has experienced this issue - putting up a repo (with node_modules checked-in) would be AWESOME to help debug this. I too have experienced it, and so have people on my team (on both npm 2 and npm 3). In our case, resetting cache and doing watchman watch-del-all has fixed it (though obviously that's not the ideal solution)...but I realllllly wanna see this fixed, and would be happy to dive in to do the fixing. So if anyone can repro and put up the test case on Github, that would be super helpful. Obv post node version along with it so that we can duplicate the env.

[pcottle]

@skevy will do if I run into it again! My bad, I hadn't thought of checking in the repos -- usually i think of the package.json as being the source of truth (so all else doesnt matter).

Others seem to be reporting that restarting helps, so I'm worried its due to something in-memory (which means repro-ing is harder).

Anyways I'm getting a new laptop from FB in a few days which means a full reinstall of everything, so I'll post back if I run into it again

[philikon]

FWIW, this error message is just the symptom of the packager not being able to find some-module. It'll walk up the directory tree until it finds node_modules/some-module. It just so happens that /Users is the last directory to try, hence the weird /Users/node_modules directory in the error message.

[jukkatupamaki]

npm cache clean && npm install fixed my project.

I encountered this bug after upgrading React Native from 0.14 to 0.17. After the upgrade I installed a new module (react-native-swipeout) and tried to require it in my code but the module could not be located. At this point I also tried to require a new JS file I had created. That did not work either.

I'm using nvm 0.29.0, Node.js 5.3.0, and npm 3.3.12.

Edit: After the first time the problem disappeared I added another module (rn-router) and the same happened again. I got it working again when I closed the emulator and the packager script, and then ran clean & build in Xcode.

[martinbigio]

Until we find the root cause for this it would be great showing a better error message with possible ways to fix the problem. For instance:

• watchman watch-del-all
• npm cache clean && npm install

Someone wants to send a PR for this? ;)

[udnisap]

Looks like this code relays on the dependency graph of the package structure.
https://github.com/facebook/react-native/blob/master/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js#L211-L231

[iOSleep]

this may be because of the metro cache, so you can add below func in your zshrc (bash_profile?)

# react-native
function rn-clean() {
  watchman watch-del-all
  rm -rf $TMPDIR/react-*
  rm -rf $TMPDIR/haste-*
  rm -rf $TMPDIR/metro-*
  npm start -- --reset-cache
}

[caitlintrussell]

I've had this same issue for the last day. We found something that worked for me, when nothing else seemed to; my global react-native install used a different version than my local. I had 54.1 local, 54.4 global. We removed the global and I'm up and running again!

[Johnsalzarulo]

@caitlintrussell - So sorry to be a bother - very new to react-native:

1. How did you know your global react-native install was a different version than your local?
2. How do you go about fixing this issue?

Any direction you could offer would be greatly appreciated.

Thanks! 🙏

[anon-r-7]

@jiang-yi-siphty when you try the react-native option for presets, what kind of error do you receive?

[lasthrun]

i fix it by:

1. xcode open "yourReactNativeProject/ios"
2. run Product -> Clean
3. After Clean success, run Product -> Build
4. fix all Build error
5. work!

i think it cause by we had doing some wrong script and it had edit some xcode setting file that git ignored, so we can not easier to solve it by revert or rebuild the project.

[YasheshSavani]

Hello,
I have installed firebase in react-native using command " npm install --save firebase" then whenever i import " import firebase from 'firebase'; " below error shows up i have tried also installing 'react-native-firebase' but it doesn't work that well.

I have got this error as below during running my application on device :

EDIT:
The error which shown above is solved by rollbacking to firebase version 5.0.4 to 5.0.3.
As an extra information i found out that [email protected] run smoothly on ios but it is not much compatible to android at this time. Therefore if any body wants to use it on android they can install firebase by command:

" npm i --save [email protected] "

Thank you

[christianscott]

This just happened to me because VSCode had erroneously inserted import { Utils } from "handlebars" into one of my files. Super cryptic error message though:

Removing the import statement fixed it.

[hramos]

Locking as recent activity appears unrelated to the original discussion around what caused the packager to fail in this manner. Now that the packager has moved to https://github.com/facebook/metro, we might want to move the discussion to an issue on that repo instead.

[hramos]

Please continue discussion over at http://github.com/facebook/metro