Metro: Metro won't work on Windows for react native

Created on 16 Jun 2018  ·  44Comments  ·  Source: facebook/metro

Repro repo: https://github.com/gengjiawen/react-native/tree/feature/RNTester_start.
I am trying to make RNTester work on windows, but I am failing with the following mistake. I tested on mac, it works.

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `AppRegistry` from `D:\Developer\react-native\RNTester\js\RNTesterApp.android.js`: Module `AppRegistry` 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-*`.
    at ModuleResolver.resolveDependency (D:\Developer\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (D:\Developer\react-native\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (D:\Developer\react-native\node_modules\metro\src\node-haste\DependencyGraph.js:239:485)
    at Object.resolve (D:\Developer\react-native\node_modules\metro\src\lib\transformHelpers.js:116:25)
    at dependencies.map.result (D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:29)
    at Array.map (<anonymous>)
    at resolveDependencies (D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:294:16)
    at D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:159:33
    at Generator.next (<anonymous>)
    at step (D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:239:307)
 BUNDLE  [android, dev] RNTester\js/RNTesterApp.android.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
picture gengjiawen
👍11

Most helpful comment

I know, many devs prefer macOS or linux. But windows has lots of user too. The repro steps is simple and clear. Please spare some time for this issue.

picture gengjiawen on 12 Jul 2018
👍22

All 44 comments

@rafeca Can you help on this issue ?

gengjiawen picture gengjiawen on 27 Jun 2018

Hey @gengjiawen , from the logs I understand that you're trying to build an android app from Windows right?

Can you paste all the logs since you start Metro? It looks like the project roots may not be configured properly

rafeca picture rafeca on 27 Jun 2018

The app is react-native RNTester. It's in this branch https://github.com/gengjiawen/react-native/tree/feature/RNTester_start. The full log is

yarn run v1.7.0
$ flow-node ./local-cli/cli.js start
Scanning folders for symlinks in D:\Developer\react-native\node_modules (92ms)
Warning! Your metro configuration contains a deprecated function "projectRoots". Please, consider changing it to "getProjectRoot" with "watchFolders" (if needed)
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   D:\Developer\react-native 


Metro Bundler ready.

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `AppRegistry` from `D:\Developer\react-native\RNTester\js\RNTesterApp.android.js`: Module `AppRegistry` 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-*`.
    at ModuleResolver.resolveDependency (D:\Developer\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (D:\Developer\react-native\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (D:\Developer\react-native\node_modules\metro\src\node-haste\DependencyGraph.js:240:485)
    at Object.resolve (D:\Developer\react-native\node_modules\metro\src\lib\transformHelpers.js:116:25)
    at dependencies.map.result (D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:29)
    at Array.map (<anonymous>)
    at resolveDependencies (D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:294:16)
    at D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:159:33
    at Generator.next (<anonymous>)
    at step (D:\Developer\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:239:307)
 BUNDLE  [android, dev] RNTester\js/RNTesterApp.android.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
gengjiawen picture gengjiawen on 27 Jun 2018

@rafeca I created an related pr in react-native https://github.com/facebook/react-native/pull/19974. Hope with that pr you can reproduce this issue easily.

gengjiawen picture gengjiawen on 29 Jun 2018

@rafeca Can you take some time to take a look on this. I really want to debug react native source code on windows.

gengjiawen picture gengjiawen on 4 Jul 2018

+1 @rafeca Just updated to 0.56 and borked. Edit: Rolled back to 0.55.4 and app is working again. Will take a read through this.

mike-niemand picture mike-niemand on 4 Jul 2018
👍1

@mjesun Can you help on the issue ?

gengjiawen picture gengjiawen on 5 Jul 2018

same issue. any solution?

adirzoari picture adirzoari on 5 Jul 2018

any solution?

victorhugoweb picture victorhugoweb on 6 Jul 2018

I think @pvdz was looking at a fix; it seems to be related to Babel changing their normalization path.

mjesun picture mjesun on 6 Jul 2018

Looks like the problem still exists.

gengjiawen picture gengjiawen on 11 Jul 2018

A new version of Metro bundler 0.38.2 (and Metro 0.42.1) has been released with a fix for the path normalisation. Please provide a repro if the issue still persist with the new version.

kelset picture kelset on 11 Jul 2018

I am not with my pc for now. But if you have a pc, you can try the repro repo. I will give a test when I get home.

gengjiawen picture gengjiawen on 11 Jul 2018

@kelset @pvdz Confirmed 0.42.1 still failed on my win10.

gengjiawen picture gengjiawen on 11 Jul 2018

@kelset @gengjiawen Tried 0.42.1 and 0.38.2 on my win 10 pc, no success. I am getting Unable to resolve module AccessibilityInfo.

harshulsharma0000 picture harshulsharma0000 on 12 Jul 2018

I know, many devs prefer macOS or linux. But windows has lots of user too. The repro steps is simple and clear. Please spare some time for this issue.

gengjiawen picture gengjiawen on 12 Jul 2018
👍22

Same problem.
Unable to resolve module AccessibilityInfo.

Version facebook/react-native: 0.56
OS: Windows 10

Rolled back to 0.55.4 and app is working again.
Any prediction to solve the problem?

guilhermegonzaga picture guilhermegonzaga on 14 Jul 2018
👍2

because of this issue?

vipcxj picture vipcxj on 16 Jul 2018

A month old blocking issue? Tried a few things but cannot get it to work on Windows.

mike-niemand picture mike-niemand on 16 Jul 2018

Very frustrating, a stable version with a bug and no attention and explanation for a fix 👎

guilhermegonzaga picture guilhermegonzaga on 16 Jul 2018

First of all apologies for the delay answering.

It was hard to debug Windows issues since I didn't have any Windows machine to be able to reproduce it. Now I got one and I'm working on a fix, which should come very soon

rafeca picture rafeca on 17 Jul 2018
👍7 ❤5 🎉3

@rafeca No, still has issue, please reopen.

error: bundling failed: Error: Unable to resolve module `missing-asset-registry-path` from `D:\code\react-native\RNTester\js\[email protected]`: Module `missing-asset-registry-path` 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-*`.
    at ModuleResolver.resolveDependency (D:\code\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (D:\code\react-native\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (D:\code\react-native\node_modules\metro\src\node-haste\DependencyGraph.js:240:485)
    at Object.resolve (D:\code\react-native\node_modules\metro\src\lib\transformHelpers.js:116:25)
    at dependencies.map.result (D:\code\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:305:29)
    at Array.map (<anonymous>)
    at resolveDependencies (D:\code\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:301:16)
    at D:\code\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:166:33
    at Generator.next (<anonymous>)
    at step (D:\code\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:260:307)
 BUNDLE  [android, dev] RNTester\js/RNTesterApp.android.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
gengjiawen picture gengjiawen on 18 Jul 2018
😄1

This is still an issue for some developers is my team, please reopen.

patrickkempff picture patrickkempff on 18 Jul 2018

Folks I think that this got closed via this commit https://github.com/facebook/react-native/commit/3ac86c366c91f8d62f0128057019b94a783b4249

We'll make sure to cherry pick it into 0.56.1 and release it asap.

kelset picture kelset on 18 Jul 2018
👍1

@kelset From what I test on RNTester , still not working. Can you verify this before publish it.

gengjiawen picture gengjiawen on 18 Jul 2018

Uhm gotcha - how did you test it?

kelset picture kelset on 18 Jul 2018

Exactly the same repro. Build RNTester and launch it.

gengjiawen picture gengjiawen on 18 Jul 2018

I mean, how did you text this precise fix? Did you modify the code inside your node_module? downloaded master and tested against it?

kelset picture kelset on 18 Jul 2018

I rebase my branch from react native master.

gengjiawen picture gengjiawen on 18 Jul 2018

@kelset I just did a fresh install of 0.56 and modified the files in my node_modules from commit facebook/react-native@3ac86c3
Still not working

React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-4510U CPU @ 2.00GHz
      Memory: 1.86 GB / 7.89 GB
    Binaries:
      Yarn: 1.6.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.1.0.0 AI-173.4819257
donjo9 picture donjo9 on 19 Jul 2018

👋 thanks for the second confirmation, I've spoken with Rafeca and he told me that a colleague of his is on the case, hopefully a fix will be found soon!

Anyway remember that everything is open source so you can try to pinpoint the issue yourself and create test solutions!

kelset picture kelset on 19 Jul 2018
👍4

@kelset In the latest code, the debug mode finally works. But you can't bundle a release using gradlew :RNTester:android:app:assembleRelease.

FAILURE: Build failed with an exception.

* What went wrong:
Failed to capture snapshot of input files for task ':RNTester:android:app:bundleReleaseJsAndAssets' property '$1' during up-to-date check.
> Failed to create MD5 hash for file content.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org
gengjiawen picture gengjiawen on 19 Jul 2018
👍6

@kelset , @gengjiawen : Are there any updates on how to solve the 0.56.0 problem?

Angelk90 picture Angelk90 on 26 Jul 2018

We've opened a new issue to discuss the whole Windows problem, please keep an eye there: https://github.com/facebook/react-native/issues/20353

kelset picture kelset on 26 Jul 2018
👍2

This is what I did and it solved the issue for me:

Create a project

react-native init awesomeproject
cd awesomeproject

Remove default version of RN and install v 0.55.4

npm remove --save react-native
npm i --save [email protected]

Remove Metro core (not sure this is needed)

npm remove --save-dev metro metro-core

Remove Babel and install v 2.1.0

npm remove babel-preset-react-native
npm i --save [email protected]

In the ".babelrc" file in the project

change: "presets": ["module:metro-react-native-babel-preset"]
To: "presets": ["react-native"]

Try to run

react-native run-android

Hope it helps!

John

jfaller30 picture jfaller30 on 28 Sep 2018
👎3 👍3

This is no longer a problem under 0.57.

mike-niemand picture mike-niemand on 28 Sep 2018
👍3

i am still facing this problem on 0.57.2 ...

jinxac picture jinxac on 12 Oct 2018

I have the same problem on 0.57.2 but 0.57.1 works fine on Windows

aeleftheriadis picture aeleftheriadis on 12 Oct 2018

Try 0.57.3

Dimous picture Dimous on 12 Oct 2018
🎉1

doesn't work even on 0.57.4, as in facebook/react-native#20460

pocesar picture pocesar on 5 Nov 2018

any feasible solution?

EvertonCosmo picture EvertonCosmo on 9 Apr 2019

any feasible solution?

GabrielDuarteJr picture GabrielDuarteJr on 24 May 2019

Babel runtime dev dependency missing

npm install @babel/runtime --save-dev

hashan41 picture hashan41 on 25 May 2019

Does not work for me.
using react native 0.59

ofirgeller picture ofirgeller on 8 Jul 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

benmurden picture benmurden  ·  4Comments
MattFoley picture MattFoley  ·  5Comments
torkelrogstad picture torkelrogstad  ·  4Comments
JaEdmuva picture JaEdmuva  ·  3Comments
IljaDaderko picture IljaDaderko  ·  5Comments