React-native: [Workarounds] Packager unable to resolve module from /Users/node_modules/

Created on 24 Dec 2015  ·  498Comments  ·  Source: facebook/react-native

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
Bug Help Wanted JavaScript Locked 📦Bundler 📮Known Issues

Most helpful comment

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 :).

All 498 comments

cc @amasad

cc @martinbigio @davidaurelio @cpojer

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

yes, we met the same problem.

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

Same problem here on version 0.17.0.

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

I also got this problem when requesting for platform=ios

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

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 :).

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?

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

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?

@amasad No, I am using npm v2.14.7

:+1: 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

@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.

@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

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.

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.

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? ;)

I banged my head against a wall for the last 15 minutes before finding this thread.
I had added a new npm library (react-native-i18n) and when I did a new build, it was throwing the same error message "Unable to resolve module react-native-i18n from /Users/node_modules".
I resolved this by killing the react-native/packager script terminal window.
Thanks for having this thread!

react-native 0.17.0
npm -v 2.14.15
node -v v5.3.0

I keep getting this error every time I install a dependency from Github. There are some deps that do not support RN 0.16.0 and onwards and I have cloned them in order to ignore .babelrc. I cant make those work.

@alvaromb find node_modules/ -type f -name .babelrc | grep -v packager | xargs rm # Removes all .babelrcs from node_modules is your friend

Thanks @frederickfogerty !

I have the same problem with 'react-native-maps', whatever I try the build fails with this message that the module cannot be found.

Similarly to @btsai, restarting packager fixed the problem for me. Is adding modules while packager is running supported?

I think the module resolution is working properly, i.e. first node_modules from project directory is checked and then after unsuccessful match (probably due to packager not noticing the change), the resolver goes up the file system hierarchy, up to /Users/node_modules/<module> and fails with the last error message, which will be Unable to resolve module <module> from /Users/node_modules/<module>

I've looked at react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js which I believe is the culprit here, but it would be good if someone more knowledgeable looked at it as well.

wow this was a really annoying bug, spent a couple of hours on this one.
so far this has worked:
Delete/install the node_modules folder and reset cache

rm -rf node_modules && npm install
rm -fr $TMPDIR/react-* or node_modules/react-native/packager/packager.sh --reset-cache

+1 platform=ios

@btsai's tip did it for me, was still encountering the issue after running both:

npm install --force
npm cache clean && npm install

But after closing the react-native/packager script terminal window and the simulator and building from scratch all was well.

It's kind of big issue, met it first time after upgrading to 0.18.1 and actually workarounds don't work for me. It happens with the native module we develop:

Unable to resolve module createReactNativeComponentClass from /Users/aylarov/Work/iOSReactApp/VoximplantDemo/node_modules/react-native-voximplant/VoxImplant.ios.js: Invalid directory /Users/node_modules/createReactNativeComponentClass

Same here. After upgrading to 0.18.1:
UnableToResolveError: Unable to resolve module module from /Users/MyUser/MyAppName/node_modules/app-module-path/lib/index.js: Invalid directory /Users/node_modules/module
This error is consistent across at least two modules that I tried to install. All modules installed previous to the react-native upgrade work well.

Update: I cloned my project again in a different folder to see if there was something else wrong on my end and now even the modules that were working before give the same error:

UnableToResolveError: Unable to resolve module react-native-picker-android from /Users/MyUser/untitled folder/node_modules/react-native-picker/index.js: Invalid directory /Users/node_modules/react-native-picker-android
    at ResolutionRequest.js:356:1

Is there any quick workaround to at least be able to keep working with the current modules before this issue get fixed? Unfortunately now I can't even launch the app.

Thank you!

Seeing this too, on and off when adding react-native-facebook-login. Error is:

uncaught error Error: UnableToResolveError: Unable to resolve module invariant from /Users/joewood/code/my-app/node_modules/react-native/Libraries/ReactIOS/NativeMethodsMixin.js: Invalid directory /Users/node_modules/invariant

I see this is from the bundle script and/or the packager. Seems intermittent.

I tried to downgrade to 0.17 using
npm install --save [email protected]
but there is still no way I can get the project to work again. What else can be done to go back to a working copy ?

I had this a few times and unfortunately @29er's fix didn't seem to work for me. I am referring to this fix:
watchman watch-del-all
npm cache clean && npm install

What did seem to fix it (after killing the emulator and npm packager script) was deleting the node_modules folder and running the basic app init commands:

  1. react-native init AwesomeProject
  2. npm install

Running react-native init again won't destroy your project :) It will prompt you if you want to override the react-native generated files.

What did seem to fix it (after killing the emulator and npm packager script) was deleting the node_modules folder and running the basic app init commands:

  1. react-native init AwesomeProject
  2. npm install

Didn't work for me

Maybe also try running npm cache clean or @29er's complete suggestion after deleting the node_modules directory?

@aylarov I wonder if it's the way that you're exporting your node_module perhaps? I had some issues with a specific module but after various attempts with trial and error to originally fix this I can't be sure.

My issue was with my module, I fixed it, but there is definitely some issue if you copy/paste contents of the module w/o using npm install , I guess it is related to npm cache somehow.

Thank you @thomasbandit your solution fixed it:

  1. react-native init AwesomeProject
    (1a. copy my package.json to the folder)
    (1b. say "no" to all override requests)
  2. npm install

At least now I can continue development with no new modules. If I try to install a new module with npm and require it in the code:
var ModulePath = require('app-module-path');
I get the same error ```Invalid directory /User/node_modules/module
This looks a lot like a fairly simple path error. Is there any way to override or expand the list of path where it is looking for the node_modules?

@Sexycrets I think that if you just add any new modules to your package.json before running that npm install you should be good.

I'm actually having this same problem with my Docker build jobs. This is just when executing react-native bundle, not when the packager is running in a terminal. There's no watchman on this container, just Node 5.3. Is anyone else seeing this problem?

@thomasbandit unfortunately not. I tried to run npm install and it did not work. I deleted the node_modules folder again and then run npm install and I still get the same error on any the package that I installed after upgrading to 0.18.

Same exact issue if I delete the node_modules and redo all the npm init and then the npm install

I even created a clean project from scratch with react-native init xxx, installed the package npm install -save app-module-path and required it in index.ios.js as require('app-module-path').addPath(__dirname);

I have closed the packager terminal window, xcode, cleaned up the cache, removed the temp files. No dice, still same exact error.

Basically from the 0.18 upgrade any module I add never works.

Does anybody know how to change the path where react-native looks for the modules? It seems it keep looking in the /Users/node_modules/module folder instead using the project specific one. Am I missing something?

Not sure if this solves anyone else's problem, but I eventually solved this by forcing my Jenkins instance to run npm install and npm cache clean via sudo as a normal user account OSX using nvm, rather than as the Jenkins user, or inside a Linux Docker instance.

@MattFoley Thanks but did not work for me, I have a mac too.

I get this 'Invalid directory /User/node_modules/react' when trying to require 'react-router' in my react-native project. (I know there may be other reasons why react-router won't work with react-native, but I figured since #2985 was closed it was worth a shot).

Dev platform: OS X 10.11.2
Target platform: IOS 9.2
React Native version: 0.19.0
React-Router version: 2.0.0-rc5

Tried to update to 0.19 and have same issue with any module I try to install (app-module-path in this case).

React Native version: 0.19.0
Dev platform: OS X 10.11.2
App-module-path: 1.0.5

  • React Native 0.18.0 -> 0.18.1, 0.18.1 -> 0.19.0
  • OS X 10.10.5

Unable to resolve module react-native from /appdir/index.ios.js: Invalid directory /Users/node_modules/react-native

FWIW When I've run into this issue, and it's happened to me and a coworker a couple times, after clearing all the caches it sometimes helps to restart my computer. Also, when restarting my Mac and getting that Are you sure you want to restart dialog _I needed to uncheck_ the Reopen windows when logging back in checkbox.

Sounds a bit extreme, but it's gotten me out of this issue a few times.

@jasonmerino thank you, could you please elaborate on the specific procedure you used to "clear all caches" before rebooting?

Thank you very much !

@Sexycrets clearing all caches was just referring to the steps in the very first post on this thread.

  • 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

@jasonmerino I did the following as you suggested:

  1. `rm -rf node_modules && npm install``
  2. rm -fr $TMPDIR/react-*
  3. node_modules/react-native/packager/packager.sh --reset-cache (the terminal hanged after [9:28:43 PM] <END> Building Dependency Graph (3365ms) so I killed it with control+C)
  4. watchman watch-del-all (returned { "version": "4.1.0", "roots": [ "/Users/MyUser/myfolder/MyProjectName" ] }
  5. shut down my mac unchecking the box to reopen open windows then turned it on again
  6. installed the package I want to use npm install --save app-module-path and it gets successfully installed: [email protected] /Users/FreeMako/sxs-mob/SexycretsMobile └── [email protected]
  7. required in my main.js: require('app-module-path').addPath(__dirname);
  8. opened the XCode project file under the iOS folder and clicked run
  9. build succeeds (suspiciously quickly), the packager runs in the terminal
  10. the simulator opens and I get the same error as before:
    screen shot 2016-02-01 at 9 33 33 pm

I guess at this point how can I remove react-native altogether as it was never been installed? So I can start fresh? I already uninstalled the react-native-cli and nothing changed, same after uninstalling and installing watchman.

I tried all of the above (clearing cache, restarting packager, rebooting, deleting node_modules, downgraded to NPM 2, ...) but I still get the same error.. Any one found another possible solution ?

simulator screen shot 03 feb 2016 12 14 14

I'm also having exactly this issue only with LinkedStateMixin. I've gone as far as reinstalling Node, restarting the project. At a bit of a loss here.

React Native v0.18.1
Latest Mac OS X

Same issue on
import { Provider } from 'react-redux/native'

I tried everything on this thread and stuck :disappointed:
Are there any other workaround? Is someone working on it?

I've just upgraded from v0.15 to v0.19 to get all the new features which resulted in upgrading npm2 to npm3 and upgrading a lot of other dependencies. Fixed most issues but stuck on this one, help is appreciated.

@ranyefet you've removed node_modules and re-npm installed??

Joining in the fun. Tried all of the fixes mentioned above.

npm: 2.14.17 (downgraded from 3.x to work with react-native)
node: 5.5.0
react-native-cli: 0.1.10
react-native: 0.19.0

The sad thing for me is that the library that isn't being found is being introduced by another library (twilio) that i'm using.

This is what I see on the console in XCode:
image
"node_modules/twilio/lib/webhooks.js: Invalid directory /Users/node_modules/crypto"

And this in the emulator:
image

This is my package.json
"dependencies": {
"react-native": "^0.19.0",
"twilio": "^3.0.0-edge",
"url": "^0.11.0"
"crypto": "0.0.3",
}

The crypto module in question is found here - strangely in two places:
./node_modules/crypto
./node_modules/react-native/Libraries/vendor/crypto

This is a pretty solid blocker - hope to get some help.

This issue may be related: https://github.com/facebook/react-native/issues/5390

I would suggest redirecting the packager to use only the top-level version. I suggested using a rn-cli.config.js file to do this (see that comment thread). Create this file and place it in your project root. Substitute MYAPPNAME for your root dir name:

var blacklist= require("react-native/packager/blacklist");
var config = {
    getBlacklistRE(platform) {
        return blacklist(platform,[/MYAPPNAME.+\/node_modules\/crypto.*/]);
    }
}
module.exports = config;

This should ignore all crypto packages other than the one in your root node_modules.

@joewood doesn't your suggestion blacklist the top level? (rootDir/node_modules/crypto is being blacklisted here right?)

Tried the suggestion out, sadly didn't work. Tried outright deleting the deeper nested dependency as well. This probably rules out that namespace collisions are the cause of the issue.

@ambarc no, the regex has a .+ - which is one or more chars. So that will exclude the top level from the blacklist and include indirect dependencies.

Completely missed the regex. Cool.

I have never upgraded from 0.17.0, that was the only stable release I've ever seen. This is solid road blocker and a dead end . Please resolve this..
Thanks

Upgrading Node from 4.2 to 5.5.0 fixed the issue for me, weird.

Update to 5.5.0 did not fix it for me. At least not for using this package: app-module-path

@ranyefet @Sexycrets using node 5.5.0 and facing the same issue.

What worked for me is

  1. in terminal go to project/node_modules/react-native
  2. run npm start from here
  3. try now

@filipgrkinic I tried and got the same error:
screen shot 2016-02-08 at 7 31 22 pm

Log on the console:
[7:29:37 PM] <END> Crawling File System (972ms) [7:29:37 PM] <START> Building in-memory fs for JavaScript [7:29:38 PM] <END> Building in-memory fs for JavaScript (794ms) [7:29:38 PM] <START> Building in-memory fs for Assets [7:29:38 PM] <END> Building in-memory fs for Assets (402ms) [7:29:38 PM] <START> Building Haste Map [7:29:39 PM] <START> Building (deprecated) Asset Map [7:29:39 PM] <END> Building (deprecated) Asset Map (122ms) [7:29:39 PM] <END> Building Haste Map (657ms) [7:29:39 PM] <END> Building Dependency Graph (2833ms) [7:30:54 PM] <START> request:/index.ios.bundle?platform=ios&dev=true [7:30:54 PM] <START> find dependencies

@ambarc yeah... actually I'm not sure it's related but that the only thing that I changed :|

This problem was introduced with this commit: https://github.com/facebook/react-native/commit/793c3564ffb0c2b66abae0a5aa7997e2a9e4869c

I'm not sure this is the correct solution as it's breaking a lot of third party libraries. Also, it's only enabled for iOS :

For now to fix 0.19.0 I've changed

react-native/packager/react-packager/src/Resolver/index.js:98

-shouldThrowOnUnresolvedErrors: (_, platform) => platform === 'ios',
+shouldThrowOnUnresolvedErrors: (_, platform) => { return false; },

Maybe @martinbigio can give some more insight on a proper solution?

@kipricker Are you sure it's that commit and not this one? https://github.com/facebook/react-native/commit/6579b705e99c925ddaed10ddcdb7ba303ccb771f

The one you referenced was first introduced in v0.14.

Perhaps @cpojer may also have some insight about this?

The commit I linked to is the specific commit that introduced the idea of shouldThrowOnUnresolvedErrors. The later commit was just abstracting out the check.

this worked for me too

  1. in terminal go to project/node_modules/react-native
  2. run npm start from here
  3. try now

I've tried above mentioned solution. Doesn't works for me.
Using node 5.6 and npm 2.14. Please suggest.

I tried the above suggestions, none of them worked so far.

None of the suggestions worked for me either. I recently upgraded my project from RN 0.17 to 0.19. I did not encounter this problem in 0.17.

Hi guys I managed to get the react-native-fbsdklogin working last night. It worked after I ran npm start in node_modules/react-native folder
I also upgraded my npm to 3.7.2 however I am not certain if that is related.
Also I am using the latest react native and react-native-fb* packages

screen shot 2016-02-17 at 10 28 05 am 3

I still encountered the same problem on 0.20. Tried all of the suggestions above. None of them works.

RN: 0.20.0
Node: 5.1
NPM: 2.14

FYI, I was too able to get around this.

Start your project in XCode, wait until you get the error in the emulator. Close out of your console window and start react-native from node_modules via npm run start, and then refresh the emulator a few times.

wonderful got it working too. exactly like natdm described

You can also set it in your package.js:
"scripts": { "start": "$NVM_BIN/react-native start" },

I am upgrading our app from 0.14.0 to 0.20.0 (been too busy to upgrade), and we are having this issue as well. None of the "workarounds" have worked...at all. FWIW, I also tried upgrading to 0.21.0-rc and it still gives the same error. Here is a screenshot of the error we get (the same as everyone else, just the PanResponder for us): http://cl.ly/2B3b3P0L2W00

I have seen some say that recreating the RN project may work, but will that really work? Our app has a lot of 3rd party Libraries, Pods, Frameworks, Bundle Resources, Custom Build Phases, and Assets. That is on top of making sure all of our Code Signing, Linking, Packaging, Search Paths, Info.plist, etc. are all setup correctly. Doing all of this work without knowing if it will actually fix the issue is out of the question.

This issue has been open for 2 months, and I see little or no feedback that this is even being looked at. It has the label of "Good First Task", which seems to imply this is a simple thing. However, if it is so simple, then why hasn't anyone proposed a _practical_ solution or Pull Request? I would happily hop in there and try to fix the issue, but I honestly have no idea where to even begin (I _really_ have no idea why this is labelled as "Good First Task")

Having a huge, app-breaking, issues like this sitting open 2 months with people just saying "me too" does nothing but hurt the project's reputation, and piss people off.

Sorry if I sound impatient or "like a dick", but instead of finding an actual solution, the error message was updated to include instructions on how to work around the issue, which is obviously not working for everyone.

/rant

I created a new project in 0.20, reinstalled all third party libraries, and copied the source code over from 0.17 version of the project. It's working fine now.

I just created a new app running: react-native init TestApp then opened the xcode project and running it in Xcode with no modifications and I still get the aforementioned error.

A little update. I completely removed both node and npm and re-installed both using nvm. I installed node 5.0 and npm 2, then I created another fresh RN project, and it ran fine. However, my original app still gets the same error, so...idk what I am going to do.

I have literally tried every suggestion on here including an existing project and a new project and I still have this issue.

I am on macbook pro. V10.11.3.
Running:
Node: 4.3.1
NPM: 2.14.12

Any suggestion would be much appreciated.

@dhrrgn The only thing that has allowed me to continue working on a project affected by this is to just copy whatever node module that is complaining into the root of your project. The packager will be able to see it there and it should work. Maybe it only works for my specific use case though, I don't know.

@dhrrgn Did you try running the command react-native upgrade? I upgraded (albeit from a more recent version) and was very worried I would be fighting this issue for the rest of the day but had a nice surprise when it worked with no problems.

Ok, I have found how to reproduce this consistently:

  1. react-native init BrokenApp
  2. Run/build the app...all is well
  3. Close the packager and the simulator.
  4. Add react, to your package.json.

    • You will now get a lot of naming collisions due to fbjs being in both react-native and react.

    • To fix the errors, you have to also install fbjs in your package.json, then run the following commands to remove the nested versions:

 ```
 find ./node_modules -name "react" -type d -prune -exec sh -c 'if [ {} != "./node_modules/react" ]; then rm -rf {};fi' \;
 find ./node_modules -name "fbjs" -type d -prune -exec sh -c 'if [ {} != "./node_modules/fbjs" ]; then rm -rf {};fi' \;
 ```

  1. Run/build the app... :boom:

You can add any packages you want, as long as they don't depend on react and all is well, but as soon as one depends on react, all hell breaks loose.

I am not sure if the bug is caused by simply installing react along-side react-native, or the fact that you have to remove react-native's copy and install it in the root that causes the issue. All I know is that there are quite a few RN packages out there depend on react, and this is likely why some people are seeing the issue and others are not.

I tried everything from above answers. Nothing work upgrading my project from 0.16 to 0.20. Node is giving me following errors when I npm install.
I created new project from scratch. All good so far. I start to add my dependencies one by one. When I add npm install --save react-native-swipeout to my project I get following warnings from npm

$ npm install --save react-native-swipeout
npm WARN peerDependencies The peer dependency react-dom@^0.14.2 included from react-tween-state will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency react@>=0.14 included from react-tween-state will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
[email protected] node_modules/react-native-swipeout
├── [email protected]

├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected])

and at this point I get the annoying screen which leads me to this page. Trying to remove now that package running npm uninstall react-native-swipeout removes package folder from node_modules and Reload JS error persists!! Restart my Xcode and rebuild project still same screen.

My feeling is this has nothing to do with react but with node itself. I was half way there. I update my npm to npm3

  • npm install -g npm3
  • rm -rf node_modules
  • npm3 install

All went well but I've got this:

`-- [email protected] 
  +-- UNMET PEER DEPENDENCY react@>=0.14
  +-- UNMET PEER DEPENDENCY react-dom@^0.14.2
  `-- [email protected] 
    +-- [email protected] 
    | `-- [email protected] 
    `-- [email protected] 

It did not install dependency for react-native-swipeout (which I believe I can do manually as was described earlier in previous error messages).
Now building my App again... Message chaged Cannot read property 'Aspect' of undefined. ( For some reason RCTCamera was removed from my project).

  • npm3 install react
  • npm3 install react-dom

That fixed my issues.

To remove Name Collision this answer worked for me by @chirag04

Using npm3 does not fix the issue for me. All peer dependencies are met. Still at a loss here.

So, I got this working, but not exactly sure how...

I updated to Node 5.6 (was on 5.0.0), and NPM 3.6. removed node_modules and re-installed. I got the same error, except this time it was for a package I could easily remove (had to do with UUIDs)...for now. Once I removed it, it worked!

Again, not sure exactly what in there fixed it, but...I still think there is an underlying problem here that needs fixed. Will let you know if I find anything else.

Just go this working too, finally..

Updated Node and npm. Did not add fbjs to package.json. Removed node_modules and used npm3 install to reinstall everything.

So I ran into this issue as well. Tried everything and nothing worked. The good thing is it was with one of my own modules and I finally tracked it down.

If the module doesn't build properly for RN or can't be resolved in the dependency graph (in my case I was using the path module from NodeJS) you'll get the same error that others have posted about the module not being found. Even if it clearly exists in the node_modules directory. To make it more concrete:

I was using an error-handler module that requires the path module. RN was telling me that error-handler could not be found even though it was in the node_modules folder. Whereas it was actually that path could not be found.

So I'm not sure where to add it in the packager (or if it's even possible) but throwing an error that a file couldn't be built vs. not found would be awesome. One step further would be to even show the offending line.

I try everything and have same issue.
I add third party like "feed parser" and i have this issue
I user nodes 5.6 & nam 3.6
simulator screen shot feb 25 2016 10 08 52 am

@meodemsao I think you have the same issue as I had. sax.js uses the NodeJS stream module, which isn't available in React Native. So you'll have to find a shim or not use that lib.

:+1: do you have any solution to mix this package?

Hey guys,

I have had many issues like the ones posted here. What solved the issue for me was to install packages using the following command, making sure that you are doing so in the root directory of your project (where the index files and the node_modules folder are located):

npm install --save.

The --save at the end is crucial since it edits your packages.json dependencies section. After installing modules with the --save at the end and making sure the packages.json dependencies were updated, I closed the terminal running the simulator, and ran the following command before rebuilding the project in Xcode:

npm cache clean && npm install

You might have to do this a few times with modules that you did not install with the --save option at the end. Also, you might encounter issues when you try to install a module via npm. I found that updating npm fixed all of those problems and you can find out how to do that here:

http://askubuntu.com/questions/562417/how-do-you-update-npm-to-the-latest-version

Hope this helps...

I finally got it for me too. I had to upgrade react-native-cli, then I created a new react native project, and then I ran npm install --save for each of my dependencies.

I then ran that project, killed the packager, then slowly add my code back.

I installed eway-rapid and am running into the same issue when I try to require it into my component. None of the solutions work and I get the following warning on installing eway-rapid:

[email protected] requires a peer of continuation-local-storage@~3 but none was installed

Same problem here with package google-locations :

Unable to resolve module https from /Users/abelchalier/Desktop/cabelo/node_modules/google-locations/lib/google-locations.js: 
Invalid directory /Users/node_modules/https
- OS X 10.11.3
- npm 3.6.0
- node 5.7.0
- react-native 0.19

I think it is a caching bug in npm3, no solutions working so far ...

simulator screen shot 1 mar 2016 9 42 35 am

I cannot install and use any additional npm packages as a module.

The module path is correct. I cut and paste the path displayed in xcode into a terminal to test path was valid and correct.

Using:

  • OS X 10.11.3
  • npm 3.3.12
  • node v5.5.0
  • react-native-cli: 0.1.10
  • react-native: 0.21.0
  • xcode 7.2.1

No work-arounds helped including:

  • npm3
  • rm -rf node_modules
  • npm start from ./node_modules/react-native.
  • watchman watch-del-all
  • rm -fr $TMPDIR/react-*
  • npm cache clean && npm install
  • Creating a new project from scratch
  • Modifying react-native/packager/react-packager/src/Resolver/index.js:98

-shouldThrowOnUnresolvedErrors: (_, platform) => platform === 'ios',
+shouldThrowOnUnresolvedErrors: (_, platform) => { return false; },

How does anyone get any work done in react-native without using additional npm packages?

Don't do npm install, do npm install [module-name] --save.

Try that.

Sent from my iPhone

On Mar 1, 2016, at 11:25 AM, esutton [email protected] wrote:

I cannot install and use any additional npm packages as a module.

The module path is correct. I cut and paste the path displayed in xcode into a terminal to test path was valid and correct.

Using:

OS X 10.11.3
npm 3.3.12
node v5.5.0
react-native-cli: 0.1.10
react-native: 0.21.0
xcode 7.2.1
No work-arounds helped including:

npm3
rm -rf node_modules
npm start from ./node_modules/react-native.
watchman watch-del-all
rm -fr $TMPDIR/react-*
npm cache clean && npm install
Creating a new project from scratch
Modifying react-native/packager/react-packager/src/Resolver/index.js:98
-shouldThrowOnUnresolvedErrors: (, platform) => platform === 'ios',
+shouldThrowOnUnresolvedErrors: (, platform) => { return false; },

How does anyone get any work done in react-native without using additional npm packages?


Reply to this email directly or view it on GitHub.

Thanks Alex. I first used "npm cache clean && npm install"

When I first added a module I did use the "--save". For example:

npm install enum --save

This did not seem to help.

Hmm... It is now working for me. I did the following:

  1. Upgrade node/npm to latest
  2. rm -rf node_modules
  3. watchman watch-del-all
  4. rm -fr $TMPDIR/react-*
  5. npm cache clean
  6. npm install [module] --save for each one again
  7. Just started from xcode.

It seems like it is taking everyone repeated random tries to get it for them. Regardless, I'm wondering if the core team is looking into a solution for this, because it is obviously a pretty big problem.

Either the error is too cryptic to tell what the user what they really need to do, or there is a bug and it is not looking at [project-directory]/node-modules/**.

I dug pretty deep into the source code but was able to determine which one of these is the problem.

@alexprice91 I think it is really that the error is misleading and too cryptic. From what I've seen the cause is usually one of two things:

  • the module is missing (ie. npm install should fix it), or
  • the module or one of it's dependencies doesn't work with React Native. (ie. any Node module where a polyfill hasn't been added).

On occasion it seems like npm is just being flakey installing components or the packager is not picking up newly installed modules but just re-installing and/or restarting the packager usually clears that up.

@martinbigio any chance we can maybe lock this thread so that we stop getting messages of just crash logs? They don't really help and getting notifications each time is pretty distracting. :smile:

To follow up, @tovazm and @jcsjohnson I think you are both running into an issue where a dependency of a module you want to install is not compatible with React Native. (ie. the net, and https modules)

@satya164 what do you mean by "Recreate the project from scratch"?

Thanks @ekryski perhaps that is the right answer in my case since eway-rapid is the only module that has not worked. It is such a cryptic error message. I'll have to figure out some other way to get a payment gateway in my react native app.

@katrinanova Delete the project and start over again.

ekryski commented 18 hours ago
I think it is really that the error is misleading and too cryptic.
From what I've seen the cause is usually one of two things:

the module is missing (ie. npm install should fix it), or
the module or one of it's dependencies doesn't work with React Native. (ie. any Node module where a polyfill hasn't been added).

I think Eric Kryski's advice makes good sense. 1) Make a better error message. 2) Locking this thread sounds sensible.

I know my problem was trying to use npm packages that have probably never been used with react-native. The error message is misleading since the package was installed.

I am a javascript and react-native newbie and have no idea how to determine if a npm package can be used with react-native or has a polyfill added ( or even know what a polyfill looks or smells like ).

The "enum" package was one I was trying to use. I assume it is not usable with react-native for a reason not understood by this C++ guy learning react-native.

https://www.npmjs.com/package/enum

Thanks Eric!

There is one more reason why you could get this error and get sent to this issue:
You are trying to import a file with a .jsx extension (or other non-supported extension)!
I don't know why I gave my files a extension. I just realized now that it is not the 'official way'.

In [email protected] the following worked:

Hi.jsx

console.log('hi')

index.ios.js

var hi = require('./Hi.jsx')

now in [email protected] you get the same UnableToResolveError error telling you to reset cache, do npm install, visit this issue etc, even though the reason is a totally different one.

Is it intended behaviour or a bug that .jsx doesn't work? Are you supposed to always use .js?

the solution above solved my problem

hai iam using react-native version 0.21, When i try to install react-native-side-menu, I got like this in terminal ENOENT: no such file or directory, open '/Users/stlmini-1221/package.json', in my simulator it shows like this
simulator screen shot 07-mar-2016 10 54 23 am
when i checked in node-modules there is no react-native-side-menu module is there, can one tell me that what is the problem and how to resolve it

I had similar issue that it cannot find module crypto, which is required by "request" module.

In the code, originally I imported request module with
import request from request
Then I tried
var request = require('react-native').request and it works!

I got this idea from this post: https://github.com/joeferraro/react-native-env/issues/3

I'm not sure why though. Hope this helps!

I think @ekryski is on the money. Check if your deps run solely on node (which runs on the V8 engine as opposed to react-native in iOS which runs on Apple's JavaScriptCore).

An example with this is the 'crypto' package - I had it as a dependency and because it doesn't work with JavaScriptCore react-native wouldn't copy the package (present in the node build) to the build on the phone/emulator.

@martinbigio - A better message would include a warning that says that react native has seen incompatible packages that are both direct inclusions and transitive ones.

For those of you who encountered this error after upgrading to 0.21.0 or 0.22.0-rc, you will notice when you run react-native upgrade that react is now a peer dependency of react-native, therefore you must install react yourself. npm install react --save solved the "Unable to resolve module LinkedStateMixin" error for me.

Tried removing fbjs and react at deeper levels and installed them only at top level, but that din't fix the issue. On Upgrading to Node 5.0 and npm 3.3.6 worked for me.

set aside a night to work on react-native, and i spent almost two hours trying all these solutions and not getting anywhere last night.

react-native 0.21.0 is ok, but 0.22.0-rc has this problem again.

Deleting the project seemed like overkill.

I was able to repro consistently and none of the cache clearing seemed to work, but this did:

  1. from my project's root dir: rm -rf node_modules/firebase
  2. npm install firebase --save
  3. npm start
  4. rebuild & compile from XCode

I had this issue. The problem was no projectRoots had node_modules in it.

I changed this:

{
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start --projectRoots $PWD/Octoly/ReactComponent"
  }
}

To this:

{
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start --projectRoots $PWD,$PWD/Octoly/ReactComponent"
  }
}

Ensure at least one of the directories listed by react-native-cli contains node_modules.

❯ npm start

> [email protected] start /Users/adrien/code/octoly-ios
> node node_modules/react-native/local-cli/cli.js start --projectRoots $PWD,$PWD/Octoly/ReactComponent

 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                            │
 │                                                                            │
 │  Keep this packager running while developing on any JS projects. Feel      │
 │  free to close this tab and run your own packager instance if you          │
 │  prefer.                                                                   │
 │                                                                            │
 │  https://github.com/facebook/react-native                                  │
 │                                                                            │
 └────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
   /Users/adrien/code/octoly-ios
   /Users/adrien/code/octoly-ios/Octoly/ReactComponent

After many days of debugging, I've found that some imported modules were not "working", meaning they made the packager crash with the well known error. They were imported by one of my packages so the packager indicated that my module cannot be imported. The problem was that my project linked my package through nom and my package had a node_modules subfolder

Remember that getting this issue can have a variety of reasons, but if you have upgraded to 0.22.0-rc4 or similar, downgrading to 0.21 will most likely work for you:

npm install [email protected] --save
watchman watch-del-all

Not sure if this will help anyone but I had this same issue and the problem turned out to be react-native AND react-native-cli both being installed globally. This being a result of upgrading the CLI. The fix was to remove the global install of react-native and therefore rely only upon the cli and local installs of react native.

I'm getting the Unable to resolve module LinkedStateMixin on > 0.21.0. I've tried every suggestion in this thread and nothing has helped so I've just resorted to downgrading for now. Which sucks because I'd love hot reload!

@mtford90: Did you install React as well as @gnestor mentions above? It's now a peerDependency so you have to manually install it (if upgrading). I was having the LinkedStateMixin problem as well and that fixed it. (As well as clearing all caches and restarting the packager)

dear all,
i thinks react native packager not good,
i try use https://github.com/mjohnston/react-native-webpack-server to package lib
have ever any people use this solution?
@ekryski

I'm getting this error when I have following console.warn line

console.warn(`Failed to read state from '${k}' because ${error && error.message}`, error);

React Packager interprets this as a require statement for some reason?

2016-03-29 13:22:53.469 [fatal][tid:main] Unable to resolve module ${k} from /Users/esa-mattisuuronen/code/myapp/actions/state-store.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/${k} and its parent directories

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
2016-03-29 13:22:54.467 [error][tid:com.facebook.react.RCTBridgeQueue][RCTWebSocketExecutor.m:85] Runtime is not ready for debugging.
 - Make sure Packager server is running.
- Make sure Chrome is running and not paused on a breakpoint or exception and try reloading again.
2016-03-29 13:23:07.347 [fatal][tid:main] Unable to resolve module ${k} from /Users/esa-mattisuuronen/code/myapp/actions/state-store.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/${k} and its parent directories

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
  1. update npm to 3
  2. npm install react --save-dev

This solve my problem.

I've been going in circles with this issue for a while -- it seems the problem is the npm packages I'm using are relying on the builtin node libraries (eg. crypto) and that these node libraries aren't available on the device.

Are there any plans to pull in the node builtins?

@hugooconnor I do not think it would make sense to do so. Those libraries are built specifically for the node environment. You would have to build a polyfill for each one; I'm not sure if that is possible on iOS's JavaScriptCore or Android's V8.

I get the same problem under ios platform. None of the workarounds here solved it.

Is there some work arounds that work for this? I even created a new project and it still creates this error :(

@gelobelo02 hey Angelo, have you tried to cleanup your node installation, maybe try to use fresh copy of NVM instead.

Will try that

any progress here?
I have to remove node_modules and npm install everytime I upgraded react-native
It is quite annoying!

@eugenehp tried did not work either :(

I think although it is a bad error message, the problem has always been in the local person's setup. The most common problems appears to be:

1) Using a module that has code not supported on iOS or Anroid
2) Not having the module installed
3) Not installing the module with --save

I would suggest a PR with a better error message and then closing this.

On Apr 18, 2016, at 10:18 PM, Horcrux [email protected] wrote:

any progress here?
I have to remove node_modules and npm install everytime I upgraded react-native
It is quite annoying!


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

@alexprice91 not so sure about the environment problem you comment.

Same setup works for me in android, but in iOS I have this problem.

Following the error message suggestions and then re-starting the packager did it for me.

One thing I noticed was having an unmet peer dependency, particularly on the React module, was causing an issue:

UNMET PEER DEPENDENCY [email protected]

To solve this I just gave it what it wanted and set the exact React version in my package. Then I:

  1. removed my node_modules directory
  2. did a fresh npm install
  3. ensured there were no warnings
  4. then did a npm start -- --reset-cache

That seemed to have done the trick, but probably just one of the many permutations of this issue.

Happens to me as well on react-native-android-statusbar on iOS.

I had this problem whilst integrating React Native into my current iOS app; downgrading to React 0.14.8 fixed it.

Same problem with an iOS app. I tried everything from above.

Happens to me to. Restarting is a pain, but it seems to clear the cache.

Any other suggestion? My code still breaks ><

I’ve run into this issue with React Native 0.24 when attempting to install the apsl-react-native-button module. Here’s a few of the things I’ve tried to resolve this:

  • followed steps 1-3 as directed by the “red screen” in the iOS simulator/Xcode console
  • downgraded to previous versions of React Native including 0.21 which was recommended in at least a couple comments above
  • fresh clone of my app’s project code which included a fresh ‘npm i’

None of these workaround attempts have been successful.

I can confirm that apsl-react-native-button was installed at the root of the node_modules dir for my project.

Given the volume of comments and participants on this ticket and that others are still encountering this in recent weeks could we please get an update from someone on the dev team ( @martinbigio ) ? If a fix or more reliable workaround is imminent this would be great to know, otherwise I need to plan my own workaround (which could be to develop without any 3rd party modules).

Thanks.

Everyone so far who has solved the issue on their project, it has been an issue with either how module are installed, or which modules are installed.

If you want community help I would suggest:

  1. Listing your package.json
  2. Rebuild your project by commenting out all other files outside of your root file. Once you have done this, slowly uncomment until you find the culprit. If you comment out everything besides a very basic intro file and still have this bug, then there is something wrong with your local build of React-Native. If the basic intro file works, then the issue is one of your modules.

Basic intro file:

import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  Text,
  View,
} from 'react-native';

function App() {
 return <View><Text>This Works</Text></View>;
}

AppRegistry.registerComponent('app-name', () => App);

If it is one of the modules.. how to fix it? I've tried every single example here and nothing. I've been on this for 7 days now.

here is my code with this issue :
https://github.com/rikilamadrid/authentication_app

You just have a couple of errors in your code. Here is a pull request to mitigate these issues:

https://github.com/rikilamadrid/authentication_app/pull/1

I'm running into this now, as well. I have a pretty barebones React Native project going, running on iOS, and breaking on the 3rd party library watson-developer-cloud, version 1.4.1. All I've got right now.

The error I made that caused this for me (and some other issues) was to run _npm outdated_ which told me to upgrade _react_ from 0.14.8 to 15.0.2. Do not do this. After reverting the change and following all the npm clean up instructions I got back to a working system.

It happens when I use some.jsx as module name, when I change to some.js,it work.I don't
know why...

@facebook-github-bot answered

Not sure if anyone's found a good fix for this yet, but what seemed to work for me was setting environmental variable NODE_PATH=./node_modules

I got this after upgrade from 0.25 to 0.26

me too, 0.26-rc went fine, though. (except HMR of functional components didn't work, see https://github.com/facebook/react-native/issues/7539)

0.27-rc is OK too.

I spent several hours trying to get this resolved and trying all of the recommendations in this thread but to no avail. Finally I realized I had accidentally installed a module in a parent directory outside my project. Once I ran a rm -rf node_modules from the parent directory all the issues went away. Hope that helps someone.

As a side note it would be great if the node server that fires up when you run a project from xCode actually started in the directory of the project. I often stop the node server and then attempt to run something in the current directory which is not the project directory.

I just ran into it as well, make sure that you have react 15.0.2 installed. If you have "react": "^15.0.2" in your package.json it will install React 15.1.0 which is not supported by RN 0.26.1. So use "react": "15.0.2"

Edit:

if after that you get any errors similar to createClass is not a function, that most likely means that either somewhere in your code you try to import (require) React from react-native OR one of the libraries you use is not updated and still does the above.
As of React Native 0.26.x you must import React from 'react' not 'react-native'

Thanks @knowbody, that fixed the issue but now I get something even more frustrating

screen shot 2016-05-23 at 16 40 54

My package.json looks like

  "dependencies": {
    "react": "15.0.2",
    "react-native": "0.26.1",

@jaimeagudo I just edited my previous comment

I doubt your App.js is exporting the right thing. We really need to end this thread since it has become a catch all for irrelevant things.

Sent from my iPhone

On May 23, 2016, at 10:12 AM, Jaime Agudo [email protected] wrote:

Thanks @knowbody, that fixed the issue but now I get something even more frustrating

My package.json looks like

"dependencies": {
"react": "15.0.2",
"react-native": "0.26.1",

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

Thanks again @knowbody, github expired cache made me wait a lot till your edition was reachable, it definitely was the cause on the 1st case.

My original code was https://github.com/bartonhammond/snowflake so as exercise I decided to fork & bump versions to get familiar with the env trying to troubleshoot further and contribute back. This is the result https://github.com/jaimeagudo/snowflake but unfortunately I face the same issue once I fixed the packages versions & imports.

Thank you all guys 👍

when i update react-native to 0.27.0-rc, this happens again.
this is really frustrated, like be haunted by a ghost... 😞


edit: i solve the problem by upgrade react from 15.0.2 -> 15.1.0

I tried using react-15.1.0 but no luck, still getting Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/ReactDefaultPerf and its parent directories.

No idea what to do - followed the instructions

watchman watch-del-all
rm -rf node_modules && npm install
npm start -- --reset-cache

Help!

@npomfret make sure:

  • react 15.1.0 match react-native 0.27.0-rc
  • react 15.0.2 match react-native 0.26.x

Same problem with 15.0.2 (with rn 0.26.x). And I also get this error from npm:

screen shot 2016-05-26 at 11 41 03

Even happens when I pair my package down to just this:

"dependencies": {
  "react": "^15.0.2",
  "react-native": "^0.26.2"
}

I solved it by removing all ~ and ^ symbols from my package.json so all dependencies have explicit versions. And then ran:

npm cache clean && watchman watch-del-all && rm -rf node_modules && npm install && npm start -- --reset-cache 

I'm using 0.21.0 but now when I add new dependencies. The same error reappear... 😣

I upgrade npm to latest version (3.9.3) and everything work like a charm !!!

  • sudo npm install npm -g
  • watchman watch-del-all
  • npm cache clean && npm install
    DONE...

## I'm facing this issue, anyone could help me to resolve it ?

2016-06-01 12:35:53.080 [fatal][tid:main] Unable to resolve module fbjs/lib/warning from /Users/andy/Desktop/Projects/react-native_Project/faceBookopen/Libraries/react-native/react-native.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/fbjs/lib/warning and its parent directories
2016-06-01 3 10 36 pm

After I had tried too many times with rm -rf node_modules && npm install, npm start -- --reset-cache(etc) and without any error,
2016-06-01 3 10 36 pm

my ios emulator also prompt the above info, I can find the warning.js under /Users/node_modules/fbjs/lib/

@ajnudnyy - if you have upgraded to React Native 0.26 then you might need to install "react" 15.0.2 which is a dependency. For me, after installing "react" it started to work for me.

Yes, as @ajnudnyy said, make sure your package.json file contains:

"dependencies": {
  "react": "15.0.2",
  "react-native": "0.26.2",

The thing that solved it for me was using explicit versions (remove any ^ or ~ symbols from the file).

And then run:

npm cache clean && watchman watch-del-all && rm -rf node_modules && npm install && npm start -- --reset-cache 

abrahamdurairaj:
Ok, as you said, it's extremely useful for me.
Would you mind that show me where I could configure node server URL.
As the following picture shown, I got this problem when I run example on our project.

2016-06-02 5 37 31 pm

Its in AppDelegate.m, mine looks like this:

#ifdef DEBUG
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Anyone who's upgraded to 0.27*, make sure you have react 15.1.0 installed.

@grabbou can this ^ be mentioned in the release docs? I know it's specified in peerDependency but still easy to miss.

The error message is misleading. Just make sure you import react and react-native separately and properly first.

In the process of trying to get to the up-to-date version of react-native from 0.14.2. Successfully installed version 0.15.0. Trying to install 0.18.0 at the moment but i am bumping into a similar issue.

Error building DependencyGraph: Error: Naming collision detected: /Users/path_to_project/node_modules/fbemitter/node_modules/fbjs/package.json collides with /Users/path_to_project/node_modules/react-native/node_modules/fbjs/package.json

My Package.json:

{
  "name": "snofolio",
  "dependencies": {
    "events": "^1.1.0",
    "flux": "^2.1.0",
    "jquery": "^2.1.4",
    "moment": "^2.10.6",
    "react-dom": "~0.14.0",
    "react-native": "^0.19.0",
    "react-native-blur": "^0.7.10",
    "react-native-calendar": "0.6.2",
    "react-native-camera": "^0.3.8",
    "react-native-carousel": "^0.4.4",
    "react-native-communications": "^0.2.3",
    "react-native-fs": "^1.3.0",
    "react-native-google-analytics-bridge": "^0.4.0",
    "react-native-image-picker": "^0.14.3",
    "react-native-image-progress": "^0.4.0",
    "react-native-qrcode": "^0.1.3",
    "react-native-radio-buttons": "^0.6.0",
    "react-native-swipeout": "^2.0.12",
    "react-native-uploader": "0.0.9",
    "react-native-video": "^0.7.1",
    "underscore": "^1.8.3",
    "whatwg-fetch": "^0.10.1"
  },
  "devDependencies": {
    "browserify": "^6.2.0",
    "watchify": "^2.1.1",
    "babelify": "^6.0.0"
  },
  "scripts": {
    "start": "watchify -t babelify js/main.js -o webbundle.js"
  }
}

nb: I do have under node_modules a react folder.

I tried the following commands without success:

  • 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

I unfortunately have no clue at the moment, any idea or hint is welcome.

This is an old issue with fbjs being duplicated in the tree. See this issue https://github.com/facebook/react-native/issues/5467. There are workarounds on that ticket, but I think the duplicate package issue has been resolved, so you're better off upgrading all the way to 0.27.

@joewood thanks for your prompt reply :)

This error message is clearly misleading. The problem in my case came from a missing module. It should be made more obvious. When I give the wrong extension to my module (for instance ".jsx" instead of ".js"), it does not find it and raises this error.

Just ran into this. Rebuilding in Xcode fixed it, although you might have to apply some of the other fixes before also (nuking node_modules, resetting cache etc).

Hi all, been running into this bug for a day or so now. This is a pretty major blocker for me. I'm working from a starter repo, with examples that run perfectly until I start adding in new dependencies. I've tried every afore-mentioned suggestion to fix this but still get the same error. If anyone has another suggestion I'm open to any ideas.

Also constantly getting these errors - latest NPM, Node, react-native 0.28.0, react 15.1.0, fresh npm i, watchman clear etc. Occasionally I get it to run but not sure what fixes it as I'm trying so many things, then it breaks again when doing another link or install or something.

screen shot 2016-06-28 at 10 29 04

Also npm link doesn't seem to work with watchman due to it not working with symlinks? Which is pretty important for local component development. And if I remove watchman (and I guess it falls back to the Node one?) then it fails if my linked component has react or react-native packages in it.

Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: BeforeInputEventPlugin
  Paths: /Users/tobidom/Sites/nice/native-catalogue/node_modules/dbk-native-fx-tile/node_modules/react/lib/BeforeInputEventPlugin.js collides with /Users/tobidom/Sites/nice/native-catalogue/node_modules/react/lib/BeforeInputEventPlugin.js

This error is caused by a @providesModule declaration with the same name accross two different files.
Error: @providesModule naming collision:
  Duplicate module name: BeforeInputEventPlugin
  Paths: /Users/tobidom/Sites/nice/native-catalogue/node_modules/dbk-native-fx-tile/node_modules/react/lib/BeforeInputEventPlugin.js collides with /Users/tobidom/Sites/nice/native-catalogue/node_modules/react/lib/BeforeInputEventPlugin.js

This error is caused by a @providesModule declaration with the same name accross two different files.
    at HasteMap._updateHasteMap (/Users/tobidom/Sites/nice/native-catalogue/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:162:15)
    at /Users/tobidom/Sites/nice/native-catalogue/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:127:25

@DominicTobias Here is an alternate to symlinks that can help with component development: https://github.com/wix/wml

I have this issue trying to include a "node" node module. I think the problem is how node and the react native packager treat require(). For example the standard modules of node are not included. I included all of them and suddenly this error occurs. I am not very familiar with react native nor node but I guess this could be fixed by adding a compatibility layer to the react native packager. Correct me if I'm missing something.

Error:
"Unable to resolve module react from /Users/andrewy/sourcecode/github/.../...ios.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/react and its parent directories
"

How it happens
My project works few hours ago, all changed after i tried install a package "react-native-web-container", after i start project again, it goes wrong.

I don't know why it is searching "/Users/node_modules/react".

All those suggestions above don't work.

Env:
My project is a mixed project, migrated from a native project, all those js files are integrated into existing native project.

npm, 3.9.5
react-native-cli: 1.0.0
react-native: 0.26.3

Help needed
I want to know how to make the npm search the correct folder. All suggestions above does not work for me.

Update, it works with node 4.0.0
The problem goes away after i installing node 4.0.0 and using npm 2.14.2.

How did i install npm 2.14.2? I removed npm first, then install iojs, nmp 2.14.2 comes with it. Then i installed node 4.0.0

I am just starting with RN, in my case watchman doesn't seem to be running at all - i am always getting:
Please specify a target and action

Having the same problem here (can't resolve my own modules), though strangely just yesterday it's working OK, and I haven't changed anything.

There's already an exact issue raised in SO:
http://stackoverflow.com/q/35558736/2176133

: D

I'm posting my fix again since I get this a lot and always get it fixed.

I get it when (and this isn't the only use case) I rename a folder or file that's already been used. Fixing the import paths don't fix the issue.

I just have to cd to AppPath/node_modules/react-native and run npm start from there.

After that, I don't have to do it again until I get the error after something funky happens.

I have the same problem when I use the reddit node module:
https://github.com/reddit/node-api-client

I tried different react/react-native version mentioned above and reinstall the modules but still doesn't work.
I am using npm 3.

my dependencies in package.json:
{ "fbjs": "^0.6.1", "react": "15.0.2", "react-native": "0.26.2", "react-native-navigation": "latest", "react-native-search-bar": "^2.11.0", "react-native-vector-icons": "^2.0.3", "react-redux": "^4.0.6", "redux": "^3.0.5", "redux-thunk": "^1.0.3", "seamless-immutable": "^5.0.1", "shitty-qs": "^1.0.1", "snoode": "^1.23.1" }

Hi guys,

After upgrading npm/node/react-native/react to its latest:

react-native: ^0.29.0
react: 15.2.1
npm: 3.10.3
node: 6.3.0

Then:

watchman watch-del-all
npm start -- --reset-cache

This issue went gone : )

Hope this helps.

I've tried every listed solution here. None worked for me.

react-native: ^0.29.0
react: 15.2.1
npm: 3.10.3
node: 6.3.0

OS X 10.11.5

I'm going to have to abandon a couple of weeks work and use something else, can't get React Native to work for me.

@dangrsmind I was in your shoes a couple weeks ago, and used the "nuclear option" to recover:

Rename your existing project folder MyProject > MyProjectOld

Delete node & npm:
http://stackoverflow.com/questions/11177954/how-do-i-completely-uninstall-node-js-and-reinstall-from-beginning-mac-os-x

Now start over with fresh install of React-Native (per https://facebook.github.io/react-native/docs/getting-started.html):
Install Node:

brew install node

Install React-Native:

npm install -g react-native-cli

Create new project (in your project folder):

react-native init MyProject

Run the new project:

cd MyProject
react-native run-ios or react-native run-android
You should have the basic Welcome to React Native! app running

Replace contents of MyProject with MyProjectOld (file-by-file)

npm install --save <any packages you need for MyProject>

It's an ugly solution, but hopefully helps you get back up and running!

@marcpechaitis I have used this "nuclear option" for other problems (i messed sth up while trying to solve the problem in this thread). The project is running again but I cant still use the module I want.
Now i give up and try to use other module instead.

@dangrsmind I tried the same version of react as you before and cant made it work. I recommond you to downgrade the react version and try to use other module.

Hey try this

watchman watch-del
Example
watchman watch-del /Users/username/WorkSpace/projectName

watchman watch-project Example
watchman watch-project /Users/username/WorkSpace/projectName

Am I the only one having this issue, but the missing file is inside my own src folder? For some reason I cannot require my own files. React (Native) works fine however.

It happens when I use some.jsx as module name, when I change to some.js,it work.I don't
know why...

why does this work? -_- its what fixed my issue

This is unrelated to .jsx/.js for me. Bizarrely if I npm install one of my modules it breaks with this error. The modules is very simple and just defines some constants like colors.

What breaks is that the module requires chromath to do a color lighten .. for some reason that breaks react-native... even though chromath is a pure JS file with no dependencies except a require to a local utils file... also with no dependencies :/

Even if I just replace the entire chromath.js contents with:

module.exports = {
  lighten: function lighten() { return 'red'; },
};

it still fails unless I remove the require call.

Hi, I got this error when installing a module named lokka.
Error:

Unable to resolve module url from /Users/jointsong/Documents/trunk_applysquare/ApplySquare/React/node_modules/node-fetch/index.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/url and its parent directories

ReactNative 0.29
Node 4.2.0
npm 3.9.5

Im have same problem and try every thing in this case...but it's not working....
i try this :

watchman watch-del-all
rm -rf node_modules && npm install
npm start -- --reset-cache

but throw error again...i dont know how to fix this...any one have solution?
screen shot 2016-07-29 at 2 00 17 pm

Even this react rnplay example I randomly browsed to has the same issue trying to use cssVar 😂

https://rnplay.org/apps/Sv6e5Q

@DominicTobias :||| how solve this problem?
Im very searched but cant find any answer...

Maybe this can help, my error was related to react native promise package.

react-native have promise as dependency and promise have asap that is including node build in module domain

I have just replaced asap node version with browser version and was able to build project again.

related issue https://github.com/kriskowal/asap/issues/64

I was facing the same problem and was solved after doing these steps.
watchman watch-del-all
npm start -- --reset-cache
rnpm link

Node version 4.2.4 npm 3.7.1

None of the above steps worked for me until I converted my code over ES6.

  "dependencies": {
    "react": "15.2.1",
    "react-native": "0.30.0"
  }

Consider the following...

From inside index.ios.js and index.android.js:

  import React, { AppRegistry } from 'react-native';
  import App from './src/main';

  AppRegistry.registerComponent('App', () => App);

Then my main.js:

  import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    Navigator
  } from 'react-native';

  import Signin from './components/authentication/signin';
  import Signup from './components/authentication/signup';
  import Tweets from './components/tweets/tweets';

  const ROUTES = {
    signin: Signin,
    signup: Signup,
    tweets: Tweets
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1
    }
  });

  class App extends Component {
    renderScene = (route, navigator) => {
      const Component = ROUTES[route.name]; // ROUTES['signin'] => Signin
      return <Component route={route} navigator={navigator} />;
    }

    render() {
      return (
        <Navigator
          style={styles.container}
          initialRoute={{name: 'signin'}}
          renderScene={this.renderScene}
          configureScene={() => { return Navigator.SceneConfigs.HorizontalSwipeJump; }}
          navigationBar={
           <Navigator.NavigationBar
             routeMapper={{
               LeftButton: (route, navigator, index, navState) =>
                { return (<Text>Cancel</Text>); },
               RightButton: (route, navigator, index, navState) =>
                 { return (<Text>Done</Text>); },
               Title: (route, navigator, index, navState) =>
                 { return (<Text>Awesome Nav Bar</Text>); },
             }}
             style={{backgroundColor: 'gray'}}
           />
          }
        />
      );
    }
  };

  export default App;

The same goes for the other components. Make sure you are using imports instead of requires and

class App extends Component

instead of

module.exports = React.createClass({

Hope this helps!

For reference, this is what the main.js looked like before I converted it to ES6:

var React = require('react-native');
var {
  StyleSheet,
  Navigator,
  Text
} = React;

var Signin = require('./components/authentication/signin');
var Signup = require('./components/authentication/signup');
var Tweets = require('./components/tweets/tweets');

var ROUTES = {
  signin: Signin,
  signup: Signup,
  tweets: Tweets
};

module.exports = React.createClass({
  renderScene: function(route, navigator) {
    var Component = ROUTES[route.name]; // ROUTES['signin'] => Signin
    return <Component route={route} navigator={navigator} />;
  },
  render: function() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{name: 'signin'}}
        renderScene={this.renderScene}
        configureScene={() => { return Navigator.SceneConfigs.HorizontalSwipeJump; }}
        navigationBar={
         <Navigator.NavigationBar
           routeMapper={{
             LeftButton: (route, navigator, index, navState) =>
              { return (<Text>Cancel</Text>); },
             RightButton: (route, navigator, index, navState) =>
               { return (<Text>Done</Text>); },
             Title: (route, navigator, index, navState) =>
               { return (<Text>Awesome Nav Bar</Text>); },
           }}
           style={{backgroundColor: 'gray'}}
         />
        }
      />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

This error is proboly caused by that your current branch is master, the code you cloned from github is lastest.
the master code is from so many numbers.
I sugest switching branch with command like git checkout 0.2.3.

在2016年07月29 18时07分, "alirezavalizade"[email protected]写道:

@DominicTobias :||| how solve this problem?
Im very searched but cant find any answer...


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

This error is proboly caused by that your current branch is master, the code you cloned from github is lastest.
the master code is from so many numbers.
I sugest switching branch with command like git checkout 0.2.3.

在2016年07月29 17时39分, "Dominic Tobias"[email protected]写道:

Even this react rnplay example I randomly browsed to has the same issue trying to use cssVar😂

https://rnplay.org/apps/Sv6e5Q


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

Same here. I'm blocked on the most trivial thing, adding a new module to my project. Not happy. Trying to downgrade R & RN as suggested by npomfret (commented on Jun 2).

Update on my issue. I think I understand the problem now. It seems the node module I'm including would like to use the buffer module. This npm module works fine in React web application. However it seems it needs Nodejs buffer module which I had to include manually. After doing so, I am now confronted with the issue that some NodeJS globals aren't available in a React Native environment ('Buffer' in my case). Something calls into the core-utils-is module, which references Buffer.isBuffer and Buffer is not defined. So unless there's a better suggestion it seems I need to look for some workaround. Basically the module I am trying to include references JSZip and I think that won't work in React Native as it uses NodeJS buffers (I guess :)).

any news fixes for this problem!?!

Node js have group of possible folders that can contain modules. When you install one module sometimes module can be dependent to other modules. You have to install this dependancies manual , npm doesn't do that automatically. For example if the error is like /Users/node_modules/module you have to install "npm install -S module". It is showing error as missing path in /Users/node_modules because this is the last element of array full with possible paths that can contain modules (for MAC).

Full list of paths by OS : https://www.npmjs.com/package/npm-paths

After upgrading my project to RN 0.31, the most annoying bug - 4968 came back. Again, I have removed all of the node modules, cleared watchman and ran package reset. I have done a clean clone, purged everything I could. It's still happening. What makes it more weird is that it's react native that cannot resolve itself :

Unable to resolve module react/lib/ReactNative from [path to node_modules] /node_modules/react-native/Libraries/react-native/react-native.js

Not sure if it's the upgrade failing. Any ideas?

Having this issue too, RN0.31, Node 6.3, I've tried everything but re-init'ing my project.

@Twitchkidd I think this one might help you (I'm working through it now) - 7686

@nazywamsiepawel The only new thing I saw was to switch to React 15.0.2 because the person was using an older version, but I'm using 15.2.1, and I'm calling import React, { Component } from 'react' on every .js file.

Sometimes it's our problem. I had used
- 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
No use.
Then I finally found my code "import xx from myPath" is not right.
'myPath' has a wrong word. So it waste me half an hour.

I am wondering why facebook has not resolved this problem since 2015...

I was struggling with this issue for the past week on every project, even just testing exporting a super simple module/js file.

I was close to researching options outside of react native, but finally decided I was going to uninstall node and npm and reinstall from scratch to see if that might work. It did!

I used the following instructions: http://stackoverflow.com/questions/11177954/how-do-i-completely-uninstall-node-js-and-reinstall-from-beginning-mac-os-x

@lindsayosco did the version you were using of Node/NPM change with the reinstall?

@PaulBGD Yes. I was on an earlier version of node (not sure the exact one... node 5 something). Not sure what version of npm. Wish I had paid more attention, but wasn't even really expecting it to work.

With the reinstall, I'm now on node 6.2.0 and npm 3.8.9.

Gosh, this is not minor. Ever since i somehow dropped into this rabbit hole i have several critical RN projects that are halted until i find a way to resolve it.

I have literally tried everything in this thread in sequence 4+ times each with no change in symptoms, I am wondering if i will soon wake to realize this is one of those special kind of nightmares only web developers have.

If all else fails, it's likely that some dependency you've specified in your package.json can't be compiled. (Or well transpiled?) That can also throw this error and it can be maddening.

Sent from my iPhone

On Aug 24, 2016, at 8:09 PM, Kyle Chamberlain [email protected] wrote:

Gosh, this is not minor. Ever since i somehow dropped into this rabbit hole i have several pretty critical (to my livelihood) RN projects that are halted until i find a way to resolve it.

I have literally tried everything in this thread in sequence 4+ times each with no change in symptoms, I am wondering if i will soon wake to realize this is one of those special kind of nightmares only web developers have.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

@martinbigio if I can get some code that runs fine on 0.19 but has this error on the latest version would that be helpful for solving this?

For anyone having this issue on a mac - this is my go to fix: https://github.com/GantMan/mobile-commander/blob/master/bin/newclear.sh

I'm pretty sure #9832 will help with this issue.

It all stems from imported modules that cannot be found in any node_modules directory.
Once we fix the error message there, the real problems will start to show themselves more clearly.

@martinbigio Is there a FB employee in charge of this?

LOL, just noticed I got 3 thumbs down for sharing my solution of how I clear cache... Ummm ok. I guess I'll just keep my solution to myself then?

My Solution:

  • watchman watch-del-all
  • rm -rf $TMPDIR/react-packager-*
  • npm cache clean && npm install
    -->At this step you maybe see:
    npm WARN [email protected] requires a peer of react@~15.2.0 but none was installed.
  • Notes that version you miss, to install type command: npm i react@~15.2.0 -save
  • Done! just re-run and problem gone!

Hope this help

Switching to npm 3 was the only thing that helped to resolve the issue

For me, when loading my own components, this was happening because I had used the .jsx extension and React Native was looking for .js for some reason!

The moment I add the following to index.ios.js I receive the above error:
const FBSDK = require('react-native-fbsdk');
const {
LoginButton,
AccessToken
} = FBSDK;

screen shot 2016-09-20 at 12 30 34 am

I have tried everythign from this post but still don't understand the reason for this error.

My package.json dependencies:
"dependencies": {
"react": "15.3.1",
"react-native": "0.33.0",
"react-native-fbsdkcore": "0.0.8",
"react-native-fbsdklogin": "0.0.8",
"react-native-fbsdkshare": "0.0.8"
}

any updates?

I also had this problem after updating react-native to 0.34.1
Solved it after

  • Delete the node_modules folder: rm -rf node_modules
  • Reset packager cache:
    rm -rf $TMPDIR/react-* --reset-cache
    or
    rm -rf node_modules/react-native/packager/packager.sh --reset-cache
  • npm cache clean
  • Killing the packager terminal and all open emulators
  • npm install

Update: For those who couldn't resolve the issue with this approach: It seems the packer uses port 8081. So before doing all the steps ensure that no other service is running on 8081:
lsof -n -i4TCP:8081
and then kill it with the PID.

After all including react-native-camera component it worked only when started via xCode...

I have a bash script like this:

rm -rf node_modules
npm cache clean
npm install
rm -fr $TMPDIR/react-*
watchman watch-del-all
node_modules/react-native/packager/packager.sh --reset-cache

I kill the packager and emulator before running this, and my project still doesn't work. What am I doing wrong? What else can I do? I have been trying to make this work for 2 days now. The dependency that started it all is deepstream.io-client-js.

In my case the problem was with the package. The package.json has a "browser": {"net": false} field and its Gruntfile.js has ignore: [ './src/tcp/tcp-connection.js' ] option set for browserify. I guess react-native does not understand these options and tries to build and use node version, and it fails. I have removed this check:

if( utils.isNode ) {
        this._endpoint = new TcpConnection( this._url );

and I have also removed tcp requirement from deepstream.io-client-js/src/message/connection.js file.

It's a bit hacky but it works now.

Tailing on to this thread for search engine visitors (and for perhaps for future me), this appears to be related; I was hitting an error when running mocha in watch mode (--watch):

Error: ENOENT: no such file or directory, stat '/Users/<username>/Projects/<projectname>/ios/build/ModuleCache/2OOEZK7ULMT9F/_Builtin_intrinsics-1QSLWXKIZ9CUS.pcm.lock'

The work-around that worked for me was running:

rm -rf ios/build/ModuleCache/*

Print: Entry, ":CFBundleIdentifier", Does Not Exist

I am seeing the Unable to resolve module... issue too. I've tried the recommended:

watchman watch-del-all
rm -rf node_modules && npm install
rm -fr $TMPDIR/react-*

Node: 6.2.2
npm: 2.15

I tried upgrading to the latest npm 3.10.9, and that didn't help either.

I also tried @GantMan's shell script.

I'm not sure where to go from here. Any help would be appreciated.

@austinkelleher did you killed all processes running at port 8081?
lsof -n -i4TCP:8081

Thanks for reaching out @abimelex. I tried that / restarting my computer with both npm 2.15 and 3.10.9. No luck.

@austinkelleher I was in a similar boat this comment from the similar thread in victory-native worked for me. Once I ran that command once I was able to continue as normal for subsequent runs.

@mikedklein I am actually using Exponent to build and run the project, so ideally, I wouldn't have to start packer from the command line using that command.

@austinkelleher have not used Exponent but FWIW I only had to run it once. Then the packager behaved as normal for all subsequent runs.

I have same issue when import new module on mac.

Uf I really hate this issue, I have upgraded my app from 0.35 to 0.37 and this issue happen again.

I have tried everything

  • removed node_modules
  • cleared npm cache
  • cleared ios cache
  • installed modules using npm
  • used yarn packet manager
  • recreated project from scratch and copied my app code

and nothing worked at the end, I went back to 0.35 and now everything works fine now

Nothing worked until I tried https://github.com/facebook/react-native/issues/4949#issuecomment-202883413.
I'm new to npm and thought that npm install would install react for me with the assumption that react is a react-native dependency.

screenshot 2016-11-16 22 52 45

I tried everything in this post, still getting this error.

Any help much appreciated!

I had this problem:

screen shot 2016-11-16 at 11 43 27 am

After several hours of frustration I resolved this by uninstalling node-uuid from the node_modules and package.json, I mean, by doing npm uninstall --save node-uuid and replacing it with uuid. Since I'm only using v4() I just replaced the name of the module and the problem disappeared. I hope this helps.

@douglaswissett What version of the react package are you using? Try to install a newer version.

@musghost

"react": "^15.3.2",
"react-native": "^0.35.0",

just ran

$npm install --save react
[email protected] /Users/douglaswalker/dev/Kompas/kompasapp-frontend/Kompas
└── UNMET PEER DEPENDENCY [email protected]

npm WARN [email protected] requires a peer of react@~15.3.1 but none was installed.
npm ERR! code 1

upgraded R & RN, still getting the error :(

Okay, so I needed to npm install React-Native v0.36.1 with React v15.3.1 👍

Thanks! @musghost

Solved!

@douglaswissett I was also seeing the same errors. I closed Xcode and re-ran the below steps and it works for me:

  • removed node_modules
  • cleared npm cache
  • cleared ios cache
  • installed modules using npm

I got the same errors when I tried to upgrade to [email protected], so I kept my [email protected]

I have the exact same issue. None of the above mentioned solutions seems to work. I'm trying to import the 'sjcl' module for encrypting.

same here with xml2json, here is packages.json:

    "dependencies": {
        "react": "15.4.1",
        "react-native": "0.38.0",
        "xml2json": "^0.10.0"
    },
    "devDependencies": {
        "babel-jest": "17.0.2",
        "babel-preset-react-native": "1.9.0",
        "jest": "17.0.3",
        "react-test-renderer": "15.4.1"
    },

This issue creeps me out. i loose hope in react native.. :|

I fixed my issue with rn-nodify! You should take a look!

Got the same issue when installing nativebase from npm aswell.

This worked for me.

(Exit Xcode and all open terminals)
rm -rf node_modules
rm -rf $TMPDIR/react-* --reset-cache
rm -rf node_modules/react-native/packager/packager.sh --reset-cache
npm cache clean
npm i

Anyone any clue on why the latest versions of react + react-native don't seem to work? I'm getting the same issues as @douglaswissett when using the latest version of react in my react-native app.

@alnorris what version of react and react-native are you using?

@alnorris sadly it was not working for me...

@JeroenNelen

$ react-native -v
react-native-cli: 1.2.0
react-native: 0.35.0`

package.json

"react": "~15.3.2",
"react-dom": "~15.2.0",
"react-native": "^0.35.0",

I had the same issue, after I changed the versions to below ones everything worked again :
react-native: 0.35.0
react: 15.3.2

This thread is almost a year old and still seems to be a problem consistently. Clearly there is something much bigger going on.

What is the status on identifying the root cause(s) of this issue?

Similar to @gorangajic and many of the others, I have tried the following

  • removed node_modules
  • cleared npm cache
  • cleared ios cache
  • installed modules using npm
  • recreated project from scratch and copied my app code
  • Lowered RN version to 0.35/36/37 as well as React version

The fix seems to be something different every time. Prior to writing this message, a restart of my mac fixed the issue.

My issue is that I can require a file like

require('./src/routes/home')

and that line alone causes the error. The file is called 'home.jsx', I've tried renaming the extension to .js with no success.

I tried everything above with no luck except the solution from @tibbus which worked BUT I needed to restart the computer also.

I have now updated to
"react": "15.4.1", "react-native": "0.38.1",
and things seem to be working so far, I'm using yarn with locked versions.

We experience this regularly. The nuclear option is to delete node_modules, reboot, then install and run. This appears to work every time and though it is a little ridiculous it's sometimes better than faffing round with the other steps.

the workaround isn't working for me. trying to import firebase

@thepill among the endless list of "solutions" provided, none of them seemed to work until I started working restarts into the mix. This was very frustrating.

If your "Unable to resolve module" error mentions core node packages, give rn-nodeify a try. It worked for me, following C.Lee's answer here.

npm install rn-nodeify

Then in package.json "scripts" section:

"postinstall": "node_modules/.bin/rn-nodeify --install http,https,url,zlib,_stream_transform,assert --hack"

Your specific packages will vary. My error first showed "Unable to resolve module url", so used just that after the --install flag, ran 'npm run postinstall' (or cleared cache like @alnorris mentioned above), and got the same error for http, etc. Kept adding packages until no errors. Didn't need a restart.

Using:

react-native: 0.39.2
react: 15.4.1

Hopefully Facebook can provide a better solution.

While doing tutorials which require npm installs mid way, after almost every npm install I had this error come up.
Unable to find this module in its module map or any of the node_modules...etc
One solution I read in another blog/forum replaced the version number of the module in the package.json with a link to the github of the module. This seemed to work, provided the node_modules folder is deleted and re-built with npm install.
Then I noticed then when the npm module gets installed with a version number using a caret ( i.e. "redux" : "^3.5.0" ) it causes this same error. Then I started either removing the caret and re-installing the node_modules or npm install a specific version so as not to have the caret sign, and I no longer get this error...!!!!

bogon:Transfer ddn$ npm start

[email protected] start /Users/ddn/Desktop/Transfer
node node_modules/react-native/local-cli/cli.js start

module.js:457
throw err;
^

Error: Cannot find module 'invariant'
at Function.Module._resolveFilename (module.js:455:15)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object. (/Users/ddn/Desktop/Transfer/node_modules/react-native/packager/react-packager/src/node-haste/Module.js:18:19)
at Module._compile (module.js:556:32)
at loader (/Users/ddn/Desktop/Transfer/node_modules/react-native/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/ddn/Desktop/Transfer/node_modules/react-native/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.6.0
npm ERR! npm v2.15.1
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node node_modules/react-native/local-cli/cli.js start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node node_modules/react-native/local-cli/cli.js start'.
npm ERR! This is most likely a problem with the Transfer package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/react-native/local-cli/cli.js start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs Transfer
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls Transfer
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/ddn/Desktop/Transfer/npm-debug.log

I ran into this, and only doing:

kill <pid of packager>
./node_modules/react-native/packager/packager.sh --reset-cache

and reloading JS in simulator worked for me.

Caveat: this is a wild guess based on 10 minutes of looking at the source...

When the cache starts up, it creates a new cache key. If that cache key was different for every instance of the packager then it would be running but would be looking in the cache directory for a differently named file.

If that's the case then either the cache key needs to be able to be calculated the same across package instances, or the cache needs to be reset on every new run of the packager.

Edit: I did some further testing and it doesn't seem like this is the issue, but maybe it'll open a new line of enquiry.

Of all the dumb sh!t I've dealt with as a programmer, this one takes the cake. Really want to be able to use RN, but I can't get a damn project going after installing a few packages???? What the hell is going on?

I had the same problem with socket.io-client package. I tried every solutions above, including the command npm run newclear, but no results. So I tried to downgrade the package from 1.7 to 1.5, running npm install [email protected], and I finally got it.

Not sure if it will help others but I just did a bonehead thing that generated this error. I had an array of objects with image paths. One of the image paths was an empty string.

{text: 'Done', image: require('')}

the image element gets passed into an Image source.

If you are getting this error on a class you wrote, check to see if you did something silly like me :)

It is now 2017 and this is still not solved. Do we need to bring in the big guns, and have Lord Zuckerberg fix this himself? I do not think he would be very happy if he has to.

However, for people struggling. It took me downgrading my version of react and react native to the following in my package.json file,

"react": "15.3.2",
"react-native": "0.35.0"

It didn't take doing all of these crazy steps listed throughout this thread either. After I init'ed the react native app, I went into the package.json, changed those two things out, ran 'npm install', then installed axios, which was the module I was having trouble with. Everything works now.

I've been able to avoid this issue by (whenever I'm about to install a new module) first quitting Simulator and terminating the server process. Once those are closed, them I can "npm install", restart everything, and it'll work fine.

I have a reproducible version of this, and the fix:

Buggy setup:

In this setup I have:

repo/myapp/node_modules/react-native-vector-icons symlinked to ../../third-party/react-native-vector-icons
third-party/react-native-vector-icons

Now that's a "dangerous" setup, and it provokes the issue..

package.json contains:

    "react-native-vector-icons": "file:../../third-party/react-native-vector-icons",

The package manager will listen to these directories:

Looking for JS files in
   repo
   repo/myapp

And the error is:

The development server returned response error code: 500

URL: http://127.0.0.1:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

Body:
{"message":"Unable to resolve module react-native-vector-icons/MaterialIcons from repo/somefile.js: Module does not exist in the module map or in these directories:\n  repo/myapp/node_modules/react-native-vector-icons\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]}
onResponse
    DevServerHelper.java:323
execute
    RealCall.java:126
run
    NamedRunnable.java:32
$ watchman watch-list
{
    "version": "4.6.0",
    "roots": [
        "/repo",
        "/repo/myapp"
    ]
}

Note that repo/myapp/node_modules/react-native-vector-icons is a symlink.

Fixed setup

In the fixed setup, there are no symlinks but the code is copied from third-party.

packages.json is the same.
watchman watch-list is the same.

But the package manager will only look for files in one directory:

Looking for JS files in
   /repo/myapp

I can reliably switch between these two setups.

Which module is not found, and which directory will differ, that is:

"Unable to resolve module from : Module does not exist in the module map or in these directories:n repo/myapp/node_modules/"

I am guessing that this is caused by some async loading.

Just installed a brand new xcode, react native install, new project and get this error.

In node 6.9.1

I don't mind posting this on kickstarter and collect funds and then hire someone to fix this.
Seriously this issue is like a blocker to many !!

This fixed it for me: thanks @dgurns

_I've been able to avoid this issue by (whenever I'm about to install a new module) first quitting Simulator and terminating the server process. Once those are closed, them I can "npm install", restart everything, and it'll work fine._

Any idea how to fix this? I tried the steps but doesn't work

Unable to resolve module Button from /Users/user/my-appointment-master/node_modules/react-native/Libraries/react-native/react-native.js: Module does not exist in the module map or in these directories:
/Users/user/my-appointment-master/node_modules/react-native/node_modules
, /Users/user/my-appointment-master/node_modules

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

  1. Clear watchman watches: watchman watch-del-all.
  2. Delete the node_modules folder: rm -rf node_modules && npm install.
  3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.

RCTFatal + 104
-[RCTBatchedBridge stopLoadingWithError:] + 1138
__25-[RCTBatchedBridge start]_block_invoke_2 + 65
_dispatch_call_block_and_release + 12
_dispatch_client_callout + 8
_dispatch_main_queue_callback_4CF + 1054
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
__CFRunLoopRun + 2205
CFRunLoopRunSpecific + 420
GSEventRunModal + 161
UIApplicationMain + 159
main + 111
start + 1

I vote that the error message be fixed to better help us figure out the issue. I think a lot of these issues are related to typos in the code that result in the packager not recognizing certain modules.

I'm not sure if this is related but I can't seem to import another module that is exported using module.exports:

https://github.com/harrisiirak/cron-parser/issues/87

https://github.com/harrisiirak/cron-parser/blob/master/lib/parser.js#L103

FWIW I found this issue to be the symptom caused by this library problem.

for me the issue came after i f**d up a new component.. I inited a brant new porject, in a different folder, and even that has an issue. I run ios.

the fix for me was

  • restart mac
  • react init project
  • git revert
  • run ios

I was dealing with this issue, until I do the next:

killing all running node proccess:

sudo killall node

Or more detailed search pid of node proccess with:

ps aux |grep node

then:

sudo kill -9 [pid]

next: Close simulators

Follow the @satya164 suggestions:

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

Start your project again:
react-native run-ios || android

or directly with cli:
node node_modules/react-native/local-cli/cli.js start

For anyone having this issue due to node-uuid not being found in crypto module:

node-uuid has been deprecated, so replace it with uuid. This fixed the problem for my situation.

Does v1000 fix this?

@colinramsay what does rebooting (OSX?) achieve?

Nothing other than killing all open packagers and potentially clearing anything in /tmp.

@colinramsay ok, I'll try it at the EOD, no luck so far on less extreme options.

lsof -n -i4TCP:8081 | awk 'NR>1 {print $2}' | xargs kill

For the record the above is what I use to remove the packager process. We also use react-native-storybook and I kill that for good measure with:

lsof -n -i4TCP:7007 | awk 'NR>1 {print $2}' | xargs kill

This almost always fixes the issue. If not, do the above, then rm -rf node_modules and reinstall, since it's sometimes due to a missing dependency. The final thing that I've had cause this is literally as described in the error message: simply an incorrect import path in your source code.

If anyone can try to init new project and include any working base64 library into it? (like hi-base64 or js-base64)? Seems to me this bug is faced (_Unable to resolve module buffer_)

@alekseykarpenko Different issue, you have to include your own buffer module.

@PaulBGD if it was excluded from RN? Issues is not reproduced in RN v.0.29.2

@PaulBGD Thank you very much for your help! I spent a few hours trying to resolve this.

For my case, I stop all node proccess and run ::
1.rm -rf node_modules && npm install
2.rm -fr $TMPDIR/react-*
and then restart the xcode and start, it is OK

I followed about 5 of these solutions, none worked.

Is there a solid solution can sure or is is there a fix coming soon?

Nothing worked for me, so I gave up, I will come back to RN when its stable, looking fwd to building apps. Mind you by then I might be just making Progressive web apps!

I'm having this issue on a fresh React Native project. I've been trying to solve this for 3 hours but nothing mentioned in this thread worked. I guess I'll just have to use relative paths everywhere.

Same issue here. Hope someone can resolve this

In order to fix this we will need a consistent repro.

I tried to repro on Mac OS but couldn't:

$ react-native init NodeModulesRepro --version 0.42.0-rc.3
$ cd NodeModulesRepro
$ react-native run-ios
$ npm install --save immutable

In index.ios.js:

import Immutable from 'immutable';
...
const map = Immutable.Map({a:1, b:2, c:3});

Reload JS works.

Can anyone provide consistent repro steps?

@davidaurelio @mkonicek I believe I have tracked down a consistent repro case. Give the instructions here a shot: https://github.com/fadookie/react-native-issue-4968

For anyone else who made it through this whole thread with nothing working,

I got it to work by importing like this:

import MyLibModule from '../../node_modules/myLibModules/'

I think that it sometimes because the Node module and ES6 module conflict.
Like:
ES6 module

import  xx from 'xx-lib'

Common JS module

var xx  = require('xx')

so Maybe. In fact we need to see the source code to make sure this is a ES6 module before we use.

for me the problem was joi module using hoek as a dependency and while trying to transverse the imports, was choking on require('buffer'). you can't use node internal modules in React Native (must be plain JS versions, for crypto, buffer, path, fs, etc)

joi was a dependency on an npm link'ed package, and hoek was there in the node_modules folder

If you are coming here because your create-react-native-app sent you this issue url when trying to use the EXPO SDK:

you have to use
import { Components } from 'expo';
instead of
import { Components } from 'exponent'; as stated in their docs.

Its happening with just about every npm lib.

You have to use relative paths I think.

I've struggled with this for so long now.
With my experience, I think we should consider changing the info message from:

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following :

  1. Clear watchman watches
  2. Delete the node_modules folder
  3. Reset packager cache

To:

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

  1. Bang your head against the wall repeatedly

so tempted to hit the unsubscribe button

Just ran into this issue. Had created a custom component (app.js) and imported it in index.ios.js:

import App from 'app';    // Did not work
import App from './app';  // Worked without errors

did not work.

I reboot osx, and it works now.

Could this warning be related to the problem?
warning react-native > xcode > [email protected]: use uuid module instead
react-native depends on xcode 0.8.9 while 0.9.1 is already out

Also running into this. Android app, Android Studio, latest node and NPM, installed a new module from our private NPM instance and started seeing this. Removing the import gets the code to compile.

I've tried all of the following in various combinations to no avail:

  • clear watchman watches
  • blow away node_modules
  • npm clear cache
  • npm start --reset-cache
  • changing import statement to a require() (idk why, just seemed like worth trying)
  • invalidate caches and restart Android Studio
  • restart macbook
  • restart macbook without reopening windows
  • restart macbook with cmd+option+p+r to reset nvram
  • full reset of both physical phone and simulator

EDIT:

  • also tried importing directly from the file in node_modules (import MyThing from '../../node_modules/my-lib/src/MyThing.js'), no dice.

if anyone has any suggestions i'd be glad to hear.

@aem There are a bunch scattered throughout the comments. Might be worth a read to go through, maybe later today I will summarize them

What worked for me was importing relatively into the node_modules folder

import whatever from '../../node_modules/thing/whatever'

@ericwooley whoops. tried that as well, forgot to include that in my list of fixes.

I went through the whole thread, nothing worked at all. i'll keep poking at it today as the library is crucial for our app to function properly, but no luck so far

What repeatedly works for me is fully closing the Packager, the iOS simulator and running react-native run-iosagain. Hasn't failed a single time yet.

@gorangajic is haul going to be the packager to ship with RN in future?

I tried a relative import, but get the same error. I give up I'm gonna try haul.

https://github.com/QuantumInformation/react-native-cron/blob/master/demo/index.ios.js#L10

Edit ----- didn't work out the box, will have to dig:

image

@gorangajic I'm having a refresh issue with haul, have you had any luck so far?
https://github.com/callstack-io/haul/issues/78

So if none of the above, including rebooting, reinstalling everything under the sun, checking the repo out fresh, _et c_, clears whatever RN has managed to break, my solution to continue editing the RN project I'm working on is... what? Format the whole machine and reinstall the OS?

@a-shark work on smth else till the community finds the solution.

I decided to not hit the unsubscribe button, due to the soap quality and entertainment value.

Well, after upgrading to Sierra (!?) _and_ rming cache _again_ I can once again launch RN apps. Until I hit this bug a third time and it takes a different rain dance to fix it than the two different solutions that worked the first two times. So add "try every solution above, then upgrade your OS and try them all again" to the list of workarounds, I guess?

141 comments so far:

image

@QuantumInformation You sure? Top of the page says satya164 opened this Issue on Dec 24, 2015 · 338 comments

Guys, I'm watching this waiting for a solution, can you start a slack or something to discuss comment length.

Github needs threads

We had the same problem and tried all of the solutions from above but nothing worked. Colleague unexpectedly solved it by downgrading the native-base version from 2.1.1 to 2.0.12 and we locked it right there.

We use it with [email protected] and [email protected].

Thank you @sglocastic , that worked for me!

I tried Haul, no luck
I did a fresh install of react native today, no luck

image

@sglocastic what native base version do you mean? I tried Rn 0.42.0, no luck

I'll be back in my usual 2 weeks. @Jacse the bang you head idea sounds great

@QuantumInformation I am using this library NativeBase and solution was just to downgrade it.

Which version of react native cli are you using?

2.0.1

I would try to run it without cron-parser dependency and haul just to be sure. Remove the code that depends on them and reinstall node modules. Start the packager with npm start --reset-cache and try to run the app.

If it breaks again only thing I can think of is to create a blank react native app and copy the code line by line and see where it breaks, and if it breaks.

I'm not using NativeBase and still get the problem using React-Native > 42

I've done all the cache clearing, etc.

Just thought I'd let you all know that I found on the wiki that there's a planned update to the packager coming soon:

https://github.com/facebook/react-native/wiki/Roadmap

https://mobile.twitter.com/cpojer is reponsible. We can but hope this issue will be addressed then.

I'll get the party hats ready.

@mmmurf Try to downgrade some dependencies and maybe you accidentally figure out which one is causing the problems. When I think about it, even upgrading could solve this problem :S

Took some time but in the end this one worked for me on a fresh project.

"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"

Anyone else tried @nealz solution before I dig out my RN project again?

@nealz @QuantumInformation Thanks it worked for me! I just updated my package.json and started npm i again. After that rerun the packager (npm start) and re-start the app and everything is working fine again.

Anyone figured out what causes this?

No luck my side, same issue:
image

image

image

@sglocastic Having come across this many times now. The issue is almost always my fault, but this error shows up and makes me think it's something strange with the resolver. Which has only been the case one time.

Be really really sure, there are no typo's or anything to that affect in your imports, and if you just added a library, make sure you aren't missing something from their docs. Some libraries don't precompile at all, and if you are not using the default react-router setup, it might be unable to use the library.

@ericwooley In my case it was the nativebase package, their latest version breaks the build. I think I saw somewhere that someone from their team is working on a fix.

There were a couple of more cases when external packages break the build and downgrading usually solves the problem.

In my opinion, the real problem here is that error is not descriptive enough and surely doesn't give you any useful info.

Glad to hear that it should be fixed soon, I'll add in my 2-cents after this morning I faced the same issue; the way to fix for me, as dumb as it may sound, was to remove the node_modules folder and re-populate it with npm i instead of yarn (wasted 4 hrs before figuring out).

For some weird reason, my project is compiling fine today. I didn't change anything.

Not even a npm install? @QuantumInformation

nope, its compiling a dream atm

Might have been the recent restart, I done an npm install a week or so ago.

my package:

{
  "name": "DemoApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "haul": "haul start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.43.3"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "haul-cli": "^0.5.0",
    "jest": "19.0.2",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

I have had this problem and tried all kinds of stuff with removing node_modules folder and changing version numbers. What helped was this single command:
npm run start -- --reset-cache

I hope this helps. Credit goes to @AlanFoster https://github.com/tleunen/babel-plugin-module-resolver/issues/29#issuecomment-293677279

I tried upgrading today and I now can't stop getting the following error

error: bundling: UnableToResolveError: Unable to resolve module `react/lib/ReactPropTypes` from `C:\src\App\node_modules\react-native\Libraries\Image\Image.android.js`: Module does not exist in the module map
or in these directories:
  C:\src\App\node_modules\react-native\node_modules\react\lib
,   C:\src\App\node_modules\react\lib

Im on windows .. it blows up around 96.8% tried everything including the reset-cache.. continues to occur.

try deleting your ios build folder

Got frustrated and gave up. Created an all new project, moved over the source, package json, a few other platform changes, and rebuilt. Working now.

One more tip to check if you get this error:
Module does not exist in the module map or in these directories
check that the "main" entry of the module's package.json is correct.

I was banging my head to this error for a while, tried all those rm rf and watchman tips, but turned out that the module just had bad package.json, the main script name was different than the actual script file.

error: bundling: UnableToResolveError: Unable to resolve module `crypto` from `C:\opensource\status-react\node_modules\eccjs\dist\0.3\ecc.js`: Module does not exist in the module map or in these directories:
  C:\opensource\status-react\node_modules

This might be related to https://github.com/facebook/react-native/issues/4968

And not a single hack on this page worked.

i have the same problem. i follow the steps but it does not work.
Then i found that the header of file ("index.xx.js" )is not right. i replace the orign part "React" with "react" . then i worked

OMG... i can't believe how this actually solved mine, because after trying all the stuff people suggested here i couldn't make it work. Did prolly 10~ rm -rf node_modules && npm install, then cleaning packager cache, running react-native-git-upgrade, restarted my mac 2 times, i didn't even know what was going on, until i saw a post in stackoverflow saying to "install react to latest version"... i said, how? i already got "react": "^16.0.0-alpha.6", on my package.json, so that shouldn't be the case.... i checked just in case my last npm install... and it was effectively complaining about react not being installed for my react-native... HOW DA * that happened? i spent 2 hours trying to figure this out. How was node not installing react if it was in the package.json? is this some kind of existing bug?

So if you still have this problem, check on that.

And just simply do:

npm install --save [email protected]

On your project root.

@msqar
Thank you. 😆😵

@robertsimoes hahaha glad it worked for you too, mate!

@msqar

You are the real MVP. Saved me from scrapping my project.

Any idea why that works?

@atturnbull yea, i have no idea, it seems to be a bug related to npm packager maybe? looks like it's not being able to recognize that you have that react module added in your package.json and it's not installing it... even though you run through all that process of rm -rf /node_modules && npm install, etc, etc, etc... even cleaning packager cache doesn't solve it. So, don't know what might cause it. Thank God i found that in StackOverflow.

@msqar I've had to do this on several machines every time I update my repo with new commits... this is seriously annoying. I'm going to put this into a script so it does this every time I try and build 😒

@msqar 3q 3q!!

After 3 hours of trying everything on this page .. including building a new project, it worked finally with a mix of some steps, I'm leaving this here so someone will be able to make use of this step too and may be just maybe it will help them

Step 1
From
android/build.graddle

allprojects {
    configurations.all {
      resolutionStrategy {
        eachDependency { DependencyResolveDetails details ->
          if (details.requested.group == 'com.facebook.react' && details.requested.name == 'react-native') {
            details.useVersion "0.44.2" // Your real React Native version here
          }
        }
      }
    }
}

Step 2
From
package.json

"react": "16.0.0-alpha.6",
 "react-dom": "^15.4.1",
 "react-native": "0.44.2",

Step 3
could not get a normal install through so i gave in to the force
npm install ---force

I honestly Wish this to help if all else fails.. and i have not tested the side effects of this steps, yet

I think there might be something going on with yarn installing packages vs
npm installing them. My react-native upgrade failed until I wiped
node_modules and installed everything with yarn AFTER clearing all NPM
caches.

Notably, some of the warnings still remained, but it started to work in
spite of the warnings. I think this may be why this issue is causing so
much confusion. It starts out showing "normal" warnings but simply not
working, and then once it's fixed the warnings still occur but it works as
expected.

On Sun, May 28, 2017 at 2:07 PM, Fuzail its EL notifications@github.com
wrote:

After 3 hours of trying everything on this page .. including building a
new project, it worked finally with a mix of some steps, I'm leaving this
here so someone will be able to make use of this step too and may be just
maybe it will help them

Step 1
android/build.graddle

allprojects {
configurations.all {
resolutionStrategy {
eachDependency { DependencyResolveDetails details ->
if (details.requested.group == 'com.facebook.react' && details.requested.name == 'react-native') {
details.useVersion "0.44.2" // Your real React Native version here
}
}
}
}
}

Step 2
package.json

"react": "16.0.0-alpha.6",
"react-dom": "^15.4.1",
"react-native": "0.44.2",

Step 3

npm install ---force

I honestly with this to help if all else fails.. and i a have not tested
the side effects of this steps,


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/4968#issuecomment-304533784,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAADZmacGPXUyynXXyuzD09YTuYBkQiHks5r-cYCgaJpZM4G7KHT
.

I solved it by removing all ^ in package.json's dependencies and devDependencies sections.

and run the following command

rm -rf node_modules
yarn                  # you may try npm install
npm start -- --reset-cache

Hope this helps.

I tried all of the above methods, but no one worked out, then I rebooted my mac, all went ok again

After installation of npm v3.10.10:

$ nvm install 6
######################################################################## 100,0%
Computing checksum with sha256sum
Checksums matched!
Now using node v6.10.3 (npm v3.10.10)

And after fresh dependencies' installation:

rm -rf  node_modules && npm install

everything works!

I think the cause of this is because node_modules error, the solution to it is to install a new or existing project to replace the package

This is a stupid question, but how do I "recreate the project from scratch" ?

Just had this problem, and it took me forever to notice that I was trying to run a project when my other project was already running. I decided to restart my computer and then my one terminal was like, "bro, you sure you want to reboot? I have this server running here. It'll die. You sure?" and then I was like AUGH.

I'd love if it warned you, like, 'Hey, noticed you've got this thing running already. You know you're f*ing up right? Like, this is all wrong. Only run one at a time.'

I tried all above methods but still getting the same error
Anyone else found the solution?
screen shot 2017-06-09 at 18 24 56

Looks like 0.45.1 fixes this (see #14412)

Same issue, all previous solutions are not working, i even started a new project and i still get the same issue.

i tried every step in this thread...this is really upsetting.
screenshot at jun 13 15-17-06

All i needed was node version 6
Everybody who gets the above error has older node version installed (Try node -v).
If you're doing brew install node its probably installing another node & not updating. You'll have to edit bash_profile to update node with homebrew. Otherwise simply update node as below(without homebrew):

  • In mac install node. This will update your node.
  • And then sudo npm install -g react-native-cli
  • react-native init AwesomeProject
    Should work now without error

^that's likely a red herring. Re-installing node clears lots of caches. Moreover, when I was experiencing the problem I had tried using node 5, 6, and 7 and all saw the error.

Yesterday I was put on a new RN project and started seeing the same issue again. The only thing that has resolved this in both of my projects now has been using haul instead of the built-in packager.

@aem thanks for your suggestion, i installed haul yet im facing the same issue! im about to give up on react native completely ...

Forgive my English is not good, the error message said: node_modules react-native node_modules react lib
The I was in the previous project which copy the lib folder into it can be run. Copy lib, copy lib The In the old works inside. I hope everyone has to help.

@ftao123 thanks for your response, you made me realise it might be the components i am using from another project, and its true! when i created the same components manually rather than import it my project ran perfectly.

Thank you, but i hope this gets fixed soon.

Well, looks like this issue is old enough that I'm being pointed here from the error messages in the code directly, and the example isn't working otherwise I wouldn't have come here. Will post my solution if/when I resolve this.

If you are taking your first dive into the React Native tutorials and just got here, here's what worked for ME.

@gnosticism's answer worked for me, first I had to rm -rf /usr/local/lib/node_modules/npm/node_modules/rimraf/node_modules.

I was on node 4 but now am on >6.

To recreate the project I created a new folder and followed the same steps for AwesomeProject again

Some new information that may be helpful to others. Like many above I tried everything in this thread, and nothing fixed it.

The language of the following error can be somewhat misleading, and perhaps even incorrect (I don't understand what the qualifications for inclusion in the module map are so I can't be certain which of the above it is):

Unable to resolve module $MODULE from $FILE: Module does not exist in the module map or in these directories: $DIRECTORIES

In my particular situation, I was importing node-hue-api into my react-native project. node-hue-api depends on dgram, amongst other packages. Since dgram is included with node, node-hue-api does not have it explicitly listed as a dependency in its package.json. So, I ran the following:

npm install dgram --save

Now, the module actually existed in one of the listed directories, but I still got the exact same error.

After pulling my hair out for a few hours I looked into whether there may be a specific issue around using dgram with react-native, and it turns out there indeed is. One is supposed to use react-native-udp instead.

npm install react-native-udp --save

And I added the following section to my project-level package.json.

"browser": {
"dgram": "react-native-udp"
},

This still did not resolve the issue, and the error remained unchanged. Next I added the exact same section to ./node_modules/node-hue-api/package.json. This fixed the issue.

Now, I got the same error for timers, stream and buffer. There are all not used by node-hue-api directly, but they seem to be implicit dependencies of some other modules that node-hue-api depends on which did make their way into the project's node_modules folder. I installed each of these with npm (one at a time, because they were revealed one at a time) and finally I was able to run my project.

Lessons for me that may be of value to others having similar issues:

  1. When you get this error, first check if any of your imported node modules have dependencies that aren't listed in their package.json, because they are assumed to be there.
  2. If, after adding installing these missing dependencies manually, you still get the message, and after blasting the cache etc you still get it, research and find out if perhaps the module you are trying to import is incompatible with react-native, see if there is an alternative, and modify the packages that are dependent on the incompatible module to use the alternative instead.

Feedback for react-native contributors:

  1. Assuming the module map excluded dgram deliberately because it's a known incompatibility: this needs to be bubbled up to the developer at build/run time with a clear error message. e.g. "package blah could not be loaded, it cannot be used with react-native".
  2. Clean up the language of the above error message, by creating specific errors for the different sub-cases. It is very unclear what is happening now, with the message being identical for missing files as well as incompatibilities. Correctly parsing the error requires too deep an understanding of what the "module map" may be.
  3. Explore a way to make the react-native alternative modules for things like dgram part of the standard react-native distro, and make them "just work", or provide instructions on how to make them work to developers.
  4. Explore a way to keep going when a modules is missing, so that perhaps an exhaustive list of current-level missing dependencies can be returned to the developer, and they don't have to npm install blah --save one at a time until the final error goes away.

Running npm update seems to work for me after installing a new module, not sure if anyone else has had success using this method?

Due to update the latest version is used, the fallback to version 0.44 can normal use

2017-06-22 11 21 44
what is wrong?

2017-06-23 10 43 17
Is there any good way to do that ?
help , help

npm i buffer solve my problem

Thank you very much

Looks like 0.45.1 fixes this (see #14412)

Upgrading to 0.45.1 also fixed this for me.

I encountered this bug after upgrading to "react-native": "^0.45.1",
I'm using these versions

    "react": "^16.0.0-alpha.12",
    "react-native": "^0.45.1",
    "react-native-cli": "^2.0.1"

Have anyone any idea how to resolve this issue?

The problem can still persist if you delete the project and recreate it in the same directory with the name that it had before. The way around it is to find the module/modules that are causing the issue; uninstall and unlink them with the following commands:
npm uninstall <module-name>
npm unlink <module-name>
The above commands always fix it for me on Windows.

I'm getting this error on Windows when importing a .jsx (rather than npm module). Is there a workaround for Windows?
For example rm -fr $TMPDIR/react-* doesn't work on windows and watchman watch-del-all just gives me the message "Please specify a target and action".

same issue again and this time its not solving .tried everything

everything was working well until yesterday. I built my project from scratch and got this error. none of the solutions above fixes it.

react-native-cli: 2.0.1
react-native: 0.45.1

I ran into the same problem. Tried @satya164 's solution but still failed. So I delete my whole proj and init a new one. It worked fine. And I was trying to setup flow for my project. But after I ran npm install --save-dev babel-cli babel-preset-flow, things went wrong again exactly like before. So I was guessing npm install --save-dev babel-cli babel-preset-flow had sth to do with this. Hope this could do some help.

@jang0509's solution fixed it for me (on Mac) when the usual solutions above failed. (Then it happened again later, only with AccesibilityInfo, per https://github.com/facebook/react-native/issues/14209.

Then I switched to a fresh new project with Yarn. Then it started happening again. Then somehow I fixed it by messing around with yarn. Hoping Mark Zuckerberg will be able to devote some of his resources to making things a bit smoother.

I started learning React Native today and I want to quit already :D

Thank you for this thread! You all are the best!!

When I Run watchman watch-del-all in my Project Directory, I got This:
bash: watchman: command not found

What Should I do?

@saeedhei you have to install watchman. It depends on the platform you're using, but instructions can be found here: https://facebook.github.io/watchman/docs/install.html

How Can I fix This?

  1. Clear watchman watches: watchman watch-del-all.
  2. Delete the node_modules folder: rm -rf node_modules && npm install.
  3. Reset packager cache: rm -fr $TMPDIR/react-* or `npm start -- --reset-cache
    After These 3 steps I got This Error:
    photo_ - - _ - -

Solved ✔️
I removed watchman Files From my Project Path.

This was happening to me and I was able to resolve it.

My error was Unable to resolve module 'react-native/Libraries/Renderer/shims/ReactNativePropRegistry from /Users/<username>/<appName>/native-base/dist/src/Utils/computeProps.js, etc. None of the solutions above worked. I realized that my troubles happened after a fresh npm install and that everything had been working fine up until then. I checked and saw that in my package.json I had "native-base": "^2.1.5". I saw that native-base had bumped up to 2.3.0 2 days ago. In package.json I fixed my version of native-base to 2.1.5, deleted my node-modules and ran npm install and my problem resolved. I am able to consistently recreate this.

Might be worth a shot to make sure your issue isn't stemming from your dependencies changing. Try fixing all your dependencies to the version you first installed them at, deleting your node-modules and npm installing.

Does anyone get success with the latest version of React? Here is my package.json
{
"name": "FirstProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^15.6.1",
"react-native": "^0.46.4"
}
}

screen shot 2017-07-21 at 4 58 45 pm

hey @bangnguyensea if you have done all the steps of deleting caches, etc, the next attempt is to remove package-lock.json.
Usually it works for me :)

rm -fr $TMPDIR/react-* and npm start -- --reset-cache are not same. In my case first command didn't help me but second did.

I follow this tutorial: http://facebook.github.io/react-native/docs/integration-with-existing-apps.html.

  1. I use react-native 0.46.4 so need to use react16.0.0-alpha13 (not react 15.6)
  2. And need to fix a little thing in index.ios.js:
    AppRegistry.registerComponent('AwesomeProject', () => RNHighScores);
    =>
    AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
  3. Also in the Podfile I need to add 'BatchedBridge' to subspecs.
    Thanks god, it works.

Having the same issue on Win 8.
"react": "16.0.0-alpha.12",
"react-native": "0.46.4",

npm: 5.3.0
node: 8.2.1

Where is this TMPDIR located on Win? => rm -fr $TMPDIR/react-*
watchman command is not available on Win => watchman watch-del-all
I do not see packager.sh on Win =>
node_modules/react-native/packager/packager.sh --reset-cache

This issue is still very much alive. I've spent the last 3+ hours combing through trying all of the solutions new and old, to no avail. This is fun though, the error changed once so now it's less descriptive:

Loading dependency graph, done. error: bundling: Error at DependencyGraph._getAbsolutePath (C:/web/www/new/BeerClicker/node_modules/react-native/packager/src/node-haste/DependencyGraph.js:2 80:11) at DependencyGraph.getDependencies (C:/web/www/new/BeerClicker/node_modules/react-native/packager/src/node-haste/DependencyGraph.js:21 8:26) at Resolver.getDependencies (C:/web/www/new/BeerClicker/node_modules/react-native/packager/src/Resolver/index.js:107:27) at C:/web/www/new/BeerClicker/node_modules/react-native/packager/src/Bundler/index.js:591:37 ....

But my device now gets a 404 and says:
Cannot find entry file index.android.js in any of the roots: ["myProjectRoot"]
Although index.android.js is very clearly in my project root, as it has been, unchanged for days.

"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
npm: 5.3.0
node: 8.1.4

Going to see how hard it is to port my code to a new project... ><

A couple days ago I was quite perplexed that downgrading everything, and even starting a new react-native project was all giving me this "Cannot find entry file" error. I found the problem on my end...

Per the instructions above, in troubleshooting this error I installed Watchman for Windows to run the watch-del-all command. Watchman is apparently not very Windows-friendly yet... It was providing improper filepaths to the HasteFS object, which was used to determine if a file exists. RN was looking for a proper path, but all HasteFS paths looked like this:

C:\my\project\root/index.android.js
C:\my\project\root/android\build.gradle

and so on... All paths had the wrong slash directly after the project root.

Eventually I realized that installing watchman was the only difference between creating the project originally and now, so I uninstalled it. Now I can create and run a new react-native project just fine.

I was then able to painlessly port my code from the broken project into the new one, so I'm finally rolling again. Hopefully this helps if anyone else gets similarly stuck.

Hit this today. I added the "module-resolver" plugin to .babelrc to rewrite some import names, and due to the dependency cache the changes were not taking place, and I was getting errors related to not being able to locate the modules.

In my case we had already modified the "start" script, so I manually ran:

node node_modules/react-native/local-cli/cli.js start --reset-cache

That fixed the issue.

Update the npm to the latest version, and then create a new item when you specify the version number, recommended temporarily with 0.44.3 version, you can solve this problem

Probably it is a version issue for your modules.
1.Check compatibility versions for you modules.
2.Modify the module version in package.json which is compatible for your "react-native" version.
3.Delete the module folder in your node_modules.
4.Reinstall the module and the issue may be solved !

It works for me in the below issue ^_^
https://github.com/GeekyAnts/NativeBase/issues/1039#issuecomment-322445050

I've been fighting with this for two days now. I finally got my project building again, but now it build if the cli.js runs as dev == true, but if dev == false then once again I get all the errors about missing packages.

I am guessing cli.js does something with the node_modules folder paths when running as dev == false that is causing some of this issue. Anyone else seeing this, not sure how to fix this.

Hi, I encountered the same issue after installing custom fonts via expo.
The screen error ' Unable to resolve module .... Module does not exist in the module map...
Error 4968 - might be related to.

Funny thing is works on one laptop and the new laptop throws this error with the same code.
So I copied project code including all node modules from other laptop it worked on to new laptop and works now on the new laptop.

I suspect its something to do with the node modules, not sure which module.
Any help would be greatly appreciated.

Cheers.
Petro

after trying all, delete package-lock.json and npm start all over

єто пиздец пацаньі :(

Unable resolve module fix >
when using Exo >

  1. press button "Restart" and wait till app is restarted
  2. press button "Device" and choose ios simulator

it works for me
it's very common issue

Nothing above worked for me... I've been fighting this issue for like 3 days and what actually worked for me was this:

  1. I created a brand new project with:
    react-native init AwesomeProject
  2. I copied the following entries from the fresh package.json over to my project:
    "dependencies": {
        "react": "16.0.0-alpha.12",
        "react-native": "0.48.1"
               ...
    },
    "devDependencies": {
        "babel-jest": "21.0.0",
        "babel-preset-react-native": "3.0.2",
        "jest": "21.0.1",
        "react-test-renderer": "16.0.0-alpha.12"
               ...
    },
  1. I re-installed all modules with:
    rm -rf node_modules && npm i
  2. I cleared all possible caches with:
    watchman watch-del-all && rm -fr $TMPDIR/react-* && rm -rf ios/build/ModuleCache/*
  3. I had to upgrade a couple of other npm packages that I use, i.e. react-native-splash-screen.

AND IT FINALLY WORKED!

Apparently, react native is very sensitive to it's node modules combination, so I figured if I can run a sample project, why I can't run mine?!

Hope that helps.

I encountered the same issue.
I have run all the commands as @satya164 posted
but it didn't work.

I resolved the error by running

node_modules/react-native/scripts/packager.sh --reset-cache 

NOT rm -rf $TMPDIR/react-*

Some path related values might have been modified, i think.

React Native version:
react-native-cli: 2.0.1
react-native: 0.47.1
Node version:
v6.11.2

yarn version:
v0.27.5

npm version :

v3.10.10

Errortype
unable to find module accesibilityInfo from node-modules/react-native/react-native-implementation.js..Is there any permanent solution.

Stucked from 1 week on this....

My package.json contains the following:
{
"name": "XYZ",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel-preset-react-native": "2.1.0",
"image-size": "^0.6.1",
"npm-git-install": "^0.3.0",
"react": "^15.6.1",
"react-native": "0.47.1",
"react-native-hideable-view": "^1.0.3",
"react-native-material-cards": "^1.0.5",
"react-native-responsive-dimensions": "^1.0.1",
"rn-viewpager": "^1.2.4"
},
"devDependencies": {
"babel-jest": "20.0.3",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}

Is there any update?Feeling Helpless....

Using npm start -- --reset-cache suggested by @mentalMedley fixed it for me. Hopefully stays fixed.

Tried Several times.does not work.

Try rollback yarn from 1.x to 0.27, this solved my problem, maybe yarn analyze the dependence between modules incorrectly.

Update

Maybe some npm module does't obay the semantic version rule, see : https://docs.npmjs.com/misc/semver#caret-ranges-123-025-004

Example

Module A depend on module XXX version 1.2.3
Module B depend on module XXX version 1.9.0

So, yarn or npm try to solve the dependence and the end using 1.9.0, because from 1.2.3 to 1.9.0 consider as unbreakable update. (such react.js 15.1 -> 15.4, but 15 -> 16 is break update !)

Then if module XXX doesn't obey the semantic version rule and delete some file or method, the Module A will show build error, because I rely on some function which module XXX v1.2.3 has but v1.9.0 not !!!

That's the reason why I am here , MDZZ
so maybe it's not the problem of yarn, npm, or react-native

Hoping this help ~

I am getting the below error. I have tried out the steps mentioned in the error console. But no luck.

    "react": "16.0.0-alpha.12",
    "react-native": "0.48.3",

error

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

Body:
{"from":"/Users/abc/development/react_native/node_modules/react-native-root-siblings/lib/AppRegistryInjection.js","to":"react-native/Libraries/EventEmitter/EventEmitter","message":"Unable to resolve module react-native/Libraries/EventEmitter/EventEmitter from /Users/abc/development/react_native/node_modules/react-native-root-siblings/lib/AppRegistryInjection.js: Module does not exist in the module mapnnThis might be related to https://github.com/facebook/react-native/issues/4968nTo resolve try the following:n 1. Clear watchman watches: watchman watch-del-all.n 2. Delete the node_modules folder: rm -rf node_modules && npm install.n 3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]}
processBundleResult
BundleDownloader.java:170
access$100
BundleDownloader.java:39
onResponse
BundleDownloader.java:139
execute
RealCall.java:135
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1113
run
ThreadPoolExecutor.java:588
run
Thread.java:818

+1 after 0.49 upgrade

I was having same problem, I just changed the import from:
import Teclado from 'teclado';
to
import Teclado from './teclado';
I used procmon (on windows) to spy filesystem calls, it looked for the file on the current directory, as expected.

After taking a 6 month break from RN I started a new project to see if this issue is resolved, nope just a big BOOM

I can't believe RN is so popular when such a fundamental thing is still broken

After almost an hour of unsuccessful attempts of solving this problem with workarounds from this thread, I just reinstalled exact modules mentioned in the error message and it worked. For me it was _react-native-elements_ and _react-native-vector-icons_.

For me using yarn solved all my problems!

Doing npm install instead of yarn install fixed the problems for me. I also deleted my node_modules folder before reinstall.

| package | version |
|--------------------|---------------------|
| react | 16.0.0 |
| react-native | 0.50.3 |
| npm | 5.5.1 |
| node | 8.4.0 |
| host os | macOS |
| offending package: | react-native-dotenv |

I tried all the yarn and cache clearing suggestions here, thank you all for those, and none worked for me. I had to remove the package that the error was pointing to from my project all together.

  1. react-native uninstall [package name]
  2. rm -rf node_modules
  3. Delete the package from your package.json
  4. Delete package-lock.json
  5. npm install
  6. react-native link
  7. npm start -- --reset-cache
  8. react-native run-ios or react-native run-android

Of course this requires you can't use package X so not much of a solutions just help to get someone over the hump. This issue helped me figure it out: https://github.com/zetachang/react-native-dotenv/issues/31

I have a repo that repros this:

git clone https://github.com/HandlebarLabs/currency-converter-starter.git
cd currency-converter-starter
git checkout module-3-lesson-1
npm install

By the way, that HandleBarLabs video tutorial is free and awesome! :-) . @HandlebarLabs I get the following issue:

Unable to resolve module `react-native/Libraries/Renderer/shims/ReactNativeBridgeEventPlugin` from `/Users/joel/src/react-native/currency-converter-starter/node_modules/react-native-gesture-handler/GestureHandler.js`: Module does not exist in the module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

ABI19_0_0RCTFBQuickPerformanceLoggerConfigureHooks
ABI19_0_0RCTFBQuickPerformanceLoggerConfigureHooks
ABI19_0_0RCTFBQuickPerformanceLoggerConfigureHooks





CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
Exponent

I tried all the cache cleaning etc and nothing worked. The only thing that helped was:
npm install --save [email protected].

Any ideas?

Hi joelpresence,Which Operating System are you using Windows or Linux.Try with Downgrading react version also.

tl;dr;

Install babel-preset-react-native and add it to your babelrc presets:

  1. Install the latest from create-react-native-app
  2. npm run eject
  3. npm i --save-dev babel-preset-react-native
  4. Edit your babelrc file presets hash to include "react-native" just before the default "babel-preset-react-native-stage-0/decorator-support".

Versions:

  • Mac OSX Sierra
  • Node v.8.6

Detailed Solution

I spent many days battling this issue. I attempted virtually every recommendation in this thread (and every combination of solutions) and none of them worked.

Here's a quick list of non-working solutions:

  • reverting versions of react/react-native vs. using newest versions
  • checking for version compatibility on every npm package
  • deleting package-lock.json
  • various cache clearing recommendaitons
  • watchman clears
  • uninstalling/reinstalling/updating watchman
  • installing/running yarn vs npm
  • removing all unnecessary plugins
  • removing ios/build folder
  • using babel-plugin-module-resolver vs. babel-plugin-module-alias
  • using various techniques of syntax withing babelrc for module-resolver vs. module-alias
  • etc

Solution
Add and configure the "babel-preset-react-native" npm package.

This leads me to believe that the default "babel-preset-react-native-stage-0/decorator-support" preset is insufficient. Does this seem likely to anyone who's a little more familiar with presets?

See my full (barebones) project architecture and configs (.babelrc and package.json) below:

Project directory structure:

android/
ios/
node_modules/
src/
.babelrc
package.json

.babelrc

{
  "presets": [
    "react-native",
    "babel-preset-react-native-stage-0/decorator-support"
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    }
  },
  "plugins": [
    [
      "module-resolver", {
        "cwd": "babelrc",
        "root": "./src" // note, this is the directory for my app, for you this may be something different
      }
    ]
  ]
}

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-plugin-module-resolver": "^3.0.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest-expo": "^22.0.0",
    "react-test-renderer": "16.0.0-beta.5"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch",
    "clean": "rm -rf node_modules && npm i && watchman watch-del-all && rm -fr $TMPDIR/react-* && rm -rf ios/build/ModuleCache/* && rm -rf ios/build"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "react": "16.0.0-beta.5",
    "react-native": "^0.49.5"
  }
}

I performed:

  • Delete the node_modules folder -rm -rf node_modules
  • rm -fr $TMPDIR/react-*
  • watchman watch-del-all
  • yarn cache clean
  • yarn
  • Recreate the project from scratch
    But:
    image

What solved the issue for me:

@TamilanDawwEenalum#8093 yeah that was weird. I ended up just doing a:

rm -rf yarn.lock
rm -rf package-lock.json
yarn cache clean
rm -rf node_modules
watchman watch-del-all
yarn start 

package.json

{
    "name": "manager",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "clean": "rm -rf node_modules && npm i && watchman watch-del-all && rm -fr $TMPDIR/react-* && rm -rf ios/build/ModuleCache/* && rm -rf ios/buildn",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "flow": "flow",
        "flow:status": "flow status",
        "flow:ls": "flow ls",
        "flow:stop": "yarn run flow stop"
    },
    "dependencies": {
        "firebase": "^4.6.2",
        "react": "16.0.0",
        "react-native": "0.50.3",
        "react-native-router-flux": "^4.0.0-beta.24",
        "react-redux": "^5.0.6",
        "redux": "^3.7.2",
        "redux-thunk": "^2.2.0"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "flow-bin": "0.56.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

babel

{
  "presets": ["react-native"]
}

I had same error, but it was simple due because i didn't install the "PACKAGE" inside project folder. After installing it, clearing both cache (watchman and yarn) didn't work.

I just had to restart the react-native expo project after the install and it worked again.

My error was different below is the stacktrace.

error: bundling failed: UnableToResolveError: Unable to resolve module ieee754 from /Users/santanu/money/SecondAndroid/node_modules/buffer/index.js: Module does not exist in the module map or in these directories:
/Users/santanu/money/SecondAndroid/node_modules

I did npm install ieee754 --save and the error is vanished.

I was getting this error when trying to set up react-native with an existing repo. git clone and then npm install wasn't working. Tried basically everything in this thread, what ended up working for me was deleting the project folder entirely and doing:

react-native init myApp
cd myApp
<rm everything in this directory except node_modules>
git init
git remote add origin <url>
git pull origin master
npm install

Now everything's fine. Looks like that's the price I'll have to pay every time I use a new computer.

I was getting this error because I was using file system modules (fs, fs-extra, xml2json).
Stopping using these or switching to a react native implementation fixed the issue.

My errror is 'Unable to resolve module assert'.
run npm install assert --save, it worked.

This happened to me twice, npm modules get required from /users/node_module and not from my working directory. I figured that on both cases, I did an npm install while a terminal is running npm run start, at first I did rm -rf node_modules && npm install to fix the issue, then the second time around I simply restarted the dev server and it worked.

In my case, I was trying to use node standard library modules, like url and querystring. By installing packaged versions of those libraries as NPM packages (url and querystring literally), everything worked right away.

bundling failed: "Unable to resolve module react-native/Libraries/vendor/emitter/EventEmitter from D:\\SVNFiles\\KIFF\\trunk\\src\\client\\ifspCloud-App\\yangoApp\\yanggoAPP\\node_modules\\react-native-root-toast\\node_modules\\react-native-root-siblings\\lib\\AppRegistryInjection.js: Module does not exist in the module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

  1. Clear watchman watches: watchman watch-del-all.
  2. Delete the node_modules folder: rm -rf node_modules && npm install.
  3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache."

Definitely not related to react-native... Running into this as well with react, installing some new dependencies seems to blow up my app. Really frustrating.

npm cache clean --force && rm -rf node_modules && npm i

Fixed it... for how long? Maybe a good reason to switch over to yarn.

Note to self: Beware installing npm package with the wrong nvm version. Could likely be the cause of such issues.

Solved the problem with removing symbol link to the real module and copy it
eg. cd node_module && rm redux && cp -r [email protected]@redux redux && cd ..
Maybe the underlining DependencyGraph cannot parse symbol link to directory

fyi since the metro packager is now its own project the cache path has also changed. You might need to do rm -rf $TMPDIR/metro-cache-* as well to fix things.

i tried all the suggested techniques but none seemed to work. finally just started to npm install all the modules it said was missing, installed 5-6 or so, and now i just get this:

image

tried a bunch to resolve that too, but can't seem to be getting anywhere. incredibly frustrated.

@harisaurus I posted a full config setup above with package.json and .babelrc config. Take a look and let me know if it helps: https://github.com/facebook/react-native/issues/4968#issuecomment-345570169

If you attempt to mirror your project after my specified versions, you may also run the following command from the root to do a fresh clean:

rm -rf node_modules && npm i && watchman watch-del-all && rm -fr $TMPDIR/react-* && rm -rf ios/build/ModuleCache/* && rm -rf ios/build

If it doesn't help, would you include your package.json and .babelrc config files so we could better understand what the issue could be?

This happened to me when after I initialised eslint on my project folder.

Hi @ryanostrom

I have the same issue, but it can't be resolved by above all methods.
.babelrc :
{ "presets": ["react-native"] }

package.json:

{
  "name": "MyProject",
  "version": "3.0.0",
  "private": true,
  "author": "MyProject Devs",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "restart": "rm -r node_modules/react-native-ui-kitten && npm install && ./node_modules/react-native/packager/packager.sh  .",
    "version": "./scripts/version-update.sh"
  },
  "dependencies": {
    "ably-react-native": "^1.0.0",
    "axios": "^0.17.1",
    "babel-plugin-transform-remove-console": "^6.8.5",
    "connect": "^3.6.6",
    "eslint-plugin-import": "^2.9.0",
    "events": "^1.1.1",
    "expo": "^25.0.0",
    "firebase": "^4.10.1",
    "flux": "^3.1.3",
    "grpc": "^1.9.1",
    "hoist-non-react-statics": "^1.2.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "object-assign": "^4.1.1",
    "prop-types": "^15.5.8",
    "react": "^16.2.0",
    "react-native": "0.51.0",
    "react-native-app-link": "^0.4.0",
    "react-native-dotenv": "^0.1.1",
    "react-native-elements": "^0.18.5",
    "react-native-exit-app": "^1.0.0",
    "react-native-fcm": "^14.0.1",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-firebase": "^3.3.0",
    "react-native-google-analytics-bridge": "^5.0.1",
    "react-native-hyperlink": "0.0.11",
    "react-native-i18n": "^2.0.12",
    "react-native-keyboard-spacer": "^0.3.1",
    "react-native-linear-gradient": "^2.4.0",
    "react-native-maps": "^0.20.1",
    "react-native-progress-bar": "^0.1.2",
    "react-native-snap-carousel": "^3.5.0",
    "react-native-storage": "^0.2.2",
    "react-native-svg": "6.2.0",
    "react-native-switch-pro": "^0.4.2",
    "react-native-ui-kitten": "^3.0.0",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation": "^1.1.2",
    "rnpm": "^1.9.0",
      "babel-jest": "19.0.0",
      "babel-preset-react-native": "1.9.1",
      "eslint": "^4.18.2",
      "eslint-config-defaults": "^9.0.0",
      "eslint-config-rallycoding": "^3.2.0",
      "eslint-plugin-react": "^7.7.0",
      "eslint-plugin-react-native": "^3.2.1",
      "jest": "19.0.2",
      "react-native-dotenv": "^0.1.1",
      "react-native-svg": "^6.2.2",
      "react-test-renderer": "16.0.0-alpha.6",
      "victory-native": "^0.17.1",
    "yoga": "0.0.0"
  },
  "devDependencies": {
    /* "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "eslint": "^4.18.2",
    "eslint-config-defaults": "^9.0.0",
    "eslint-config-rallycoding": "^3.2.0",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-react-native": "^3.2.1",
    "jest": "19.0.2",
    "react-native-dotenv": "^0.1.1",
    "react-native-svg": "^6.2.2",
    "react-test-renderer": "16.0.0-alpha.6",
    "victory-native": "^0.17.1" */
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./app/assets/fonts"
    ]
  }
}

I tried everything of the mentioned solutions, nothing worked. For me it happened when I installed Redux with npm install --save react-redux. Everything worked fine until I installed redux. I installed it in the project folder, but get the error message: "Unable to resolve module 'redux' from...."

@Benzer1406 rm -rf node_modules && npm i

Reinstall all modules, make sure you're using the right node version, I got this error by mixing packages installed with 6.10 and 8.x

This happened to me when I tried to install a package, I installed a old version the first time and this error pops up, I tried to fixed it followed the instruction, but it didn't work.

And I removed the node_modules and tried npm install a couple of times, still didn't work.

And I tried to delete the new package (the one I just installed) property in the Pacakege.json, and deleted node_modules and then npm install again, this time worked!

Just happened to me as well:

  • Added local dependency with yarn add file:../pathToLocalLibrary/libaryName
  • Tried running and I got the above mentioned error
  • Deleting node_modules and caches fixed the error

I see this when trying to build an app that tests out a native module. I'd like to do npm link in the source code for a native module so I can test out changes to the dependency without npm installing again.

I've run into this issue too while building a React Native app. Is the only current solution to reinstall the node_modules and delete the caches? Doing this every time I implement a new module (maybe 3 or 4 times per day) massively slows down development.

You don't need to reinstall node_modules each and everytime, you can just restart the dev debugger and rebundle things up, it works for me.

@aprilmintacpineda how do you do that _exactly_?

ctrl+c, then npm run start or react-native start, you can also do react-native start --clear-cache, then if you restart your app on your Android emulator or iOS simulator, it will re-bundle.

aaargh... this is issue sooo frustrating! I cannot work on my project because of this! resetting cache does not help ;(

In an Expo app written in TypeScript, on a Mac, I found that I wasn't able to require any image assets – npm modules were importing fine, however. I followed the steps in the top comment, and all the other 600 comments, but to no avail. I did get it working in the end, however – although I'm not completely sure how. Here's a general health check:

  • Simply restart your computer. This may clear other caches that have been missed by the suggested cache-clearing steps in this thread.

  • If you're writing a relative path like, require("img/image.png"), try putting an explicit ./ in front, e.g.: require("img/image.png"). Whether this tells the packager(?) to look for the image again via an uncached path, or whether adding ./ really is functionally different, I don't know. This step may just be superstition.

  • Check whether the path is actually correct, of course. In a TypeScript project, all module imports with non-relative names are assumed to be relative to the baseUrl configured in tsconfig.json (defaulting to the location of tsconfig.json itself). TypeScript module resolution docs here. Whether this applies to require() imports too, I don't know.

  • In the Expo client, reload the javascript bundle.

I haven't said much here, and it surely won't apply to most people, but hopefully this might help someone.

@fzymek did you try to remove the metro cache dir rm -rf $TMPDIR/metro-cache-*? That's what fixed it for me.

@shirakaba Always use ./ for relative paths, because doing require("img/image.png") will first look into your node modules by default (and then maybe in your relative files, unsure), while require("./img/image.png") look relatively to the file.

@maggo Yup. Tried it. I tried all rm's combinations mentioned above separately and in conjunction. it does not work for me ;( I also tried using yarn instead of npm

As soon as I type import of a new module I am getting this error. All I did was created simple react-native app and then I tried importing https://github.com/bttmly/nba module. as soon as I add

import NBA from 'nba'

I am getting this error. I am not even using any api from it. Without this statement it just works fine ;(

everything in the top seemed to not work for me.
untitled789654

i have the same issue and all the solution above does not work.

screen shot 1439-07-30 at 1 48 34 pm

I just reinstalled my project from remote Git and am suddenly a victim of this issue.

Unable to resolve module `redux` from `/Users/wbattel4607/Desktop/project/node_modules/react-redux/lib/connect/mapDispatchToProps.js`: Module `redux` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
+ [[ false != true ]]
+ [[ ! -f /Users/wbattel4607/Library/Developer/Xcode/DerivedData/myapp-cvscqhbhrcowbrfzfirwmdiuyvfc/Build/Products/Release-iphoneos/myapp.app/main.jsbundle ]]
+ echo 'error: File /Users/wbattel4607/Library/Developer/Xcode/DerivedData/myapp-cvscqhbhrcowbrfzfirwmdiuyvfc/Build/Products/Release-iphoneos/myapp.app/main.jsbundle does not exist. This must be a bug with'
+ echo 'React Native, please report it here: https://github.com/facebook/react-native/issues'
+ exit 2

We do not, nor ever have used redux. Nothing in our project changed between when it was working and when it was not. None of the proposed solutions work for us. I've reset the cache, restarted my computer, reinstalled node_modules with both NPM and Yarn, etc.... I've been at this for hours and don't have anything left to try.

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 6.10.3
  Yarn: 1.6.0
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.3 => 0.55.3

How is this still an issue 3 years later?

Everything was working perfectly well too ! And suddenly, this one showed up, without any reasons. I mean "WTF React Native !" ! These kind of issues are very a pain !


EDIT : Tried deleting cache, killed packager, restarted, shuted down my computer and restarted it, deleting node_modules and npm install again............

== > Nothing worked o/

This is a disaster for our team. The only way to get past this is to go nuclear and create a whole new project. I still don't understand how nobody has found a concrete answer after all this time.

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
}

@wbattel4607 Installing redux resolved the issue for me 🤷‍♂️

@fzymek hello , is your problem been solved yet ?

In the end, this worked for me.

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 9.11.1
  Yarn: 1.6.0
  npm: 5.6.0
  Watchman: 4.7.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.54.2 => 0.54.2

Ejected create-react-native-app with typescript using ("react-native-typescript-transformer")

#!/bin/bash

# Clean xcode generated crap
rm -rf ios/YOUR_PROJECT.xcodeproj/xcuserdata/

# Clean build
rm -rf ios/build/

# Remove relevant react-native cache files
rm -rf $TMPDIR/metro-*
rm -rf $TMPDIR/haste-*
rm -rf $TMPDIR/react-*

# sanity!
rm -rf node_modules

@binbinla I haven't tried it for a while. I'll recheck when I have more time. Maybe this weekend.

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!

@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! 🙏

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

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.

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 :
screenshot_1527841687

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

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

img_1953

Removing the import statement fixed it.

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.

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

Was this page helpful?
0 / 5 - 0 ratings