Metro won't work on Windows for react native

[gengjiawen]

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.

[gengjiawen]

@rafeca Can you help on this issue ?

[rafeca]

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

[gengjiawen]

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]

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

[gengjiawen]

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

[mike-niemand]

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

[gengjiawen]

@mjesun Can you help on the issue ?

[adirzoari]

same issue. any solution?

[victorhugoweb]

any solution?

[mjesun]

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

[gengjiawen]

Looks like the problem still exists.

[kelset]

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.

[gengjiawen]

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]

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

[harshulsharma0000]

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

[gengjiawen]

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.

[guilhermegonzaga]

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?

[vipcxj]

because of this issue?

[mike-niemand]

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

[guilhermegonzaga]

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

[rafeca]

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

[gengjiawen]

@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\uie_thumb_normal@2x.png`: 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.

[patrickkempff]

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

[kelset]

Folks I think that this got closed via this commit facebook/react-native@3ac86c3

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

[gengjiawen]

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

[kelset]

Uhm gotcha - how did you test it?

[gengjiawen]

Exactly the same repro. Build RNTester and launch it.

[kelset]

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

[gengjiawen]

I rebase my branch from react native master.

[donjo9]

@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

[kelset]

👋 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!

[gengjiawen]

@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

[Angelk90]

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

[kelset]

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

[jfaller30]

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 react-native@0.55.4

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 babel-preset-react-native@2.1.0

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

[mike-niemand]

This is no longer a problem under 0.57.

[salujaharkirat]

i am still facing this problem on 0.57.2 ...

[aeleftheriadis]

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

[Dimous]

Try 0.57.3

[pocesar]

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

[EvertonCosmo]

any feasible solution?

[GabrielDuarteJr]

any feasible solution?

[hashan41]

Babel runtime dev dependency missing

npm install @babel/runtime --save-dev

[ofirgeller]

Does not work for me.
using react native 0.59

[philippkolbe]

I found a solution that worked for me for the error error: bundling failed: Error: Unable to resolve module.

It seems like using a function in the module.exports of metro.config.js does not work. After using an object it worked for me.