Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Metro won't work on Windows for react native #181

Closed
gengjiawen opened this issue Jun 16, 2018 · 45 comments
Closed

Metro won't work on Windows for react native #181

gengjiawen opened this issue Jun 16, 2018 · 45 comments

Comments

@gengjiawen
Copy link

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
Copy link
Author

@rafeca Can you help on this issue ?

@rafeca
Copy link
Contributor

rafeca commented Jun 27, 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

@gengjiawen
Copy link
Author

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
Copy link
Author

gengjiawen commented Jun 29, 2018

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

@gengjiawen
Copy link
Author

@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
Copy link

mike-niemand commented Jul 4, 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.

@gengjiawen
Copy link
Author

@mjesun Can you help on the issue ?

@adirzoari
Copy link

same issue. any solution?

@victorhugoweb
Copy link

any solution?

@mjesun
Copy link
Contributor

mjesun commented Jul 6, 2018

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

gengjiawen referenced this issue Jul 9, 2018
Reviewed By: davidaurelio

Differential Revision: D8735223

fbshipit-source-id: 646f03a6192699a8f890e19cdcafee1631332251
@gengjiawen
Copy link
Author

Looks like the problem still exists.

@kelset
Copy link
Contributor

kelset commented Jul 11, 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.

@gengjiawen
Copy link
Author

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
Copy link
Author

gengjiawen commented Jul 11, 2018

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

@harshulsharma0000
Copy link

harshulsharma0000 commented Jul 12, 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.

@gengjiawen
Copy link
Author

gengjiawen commented Jul 12, 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.

@guilhermegonzaga
Copy link

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
Copy link

vipcxj commented Jul 16, 2018

because of this issue?

@mike-niemand
Copy link

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

@guilhermegonzaga
Copy link

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

@rafeca
Copy link
Contributor

rafeca commented Jul 17, 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

@gengjiawen
Copy link
Author

@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
Copy link

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

@kelset
Copy link
Contributor

kelset commented Jul 18, 2018

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
Copy link
Author

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

@kelset
Copy link
Contributor

kelset commented Jul 18, 2018

Uhm gotcha - how did you test it?

@gengjiawen
Copy link
Author

Exactly the same repro. Build RNTester and launch it.

@kelset
Copy link
Contributor

kelset commented Jul 18, 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?

@gengjiawen
Copy link
Author

I rebase my branch from react native master.

@donjo9
Copy link

donjo9 commented Jul 19, 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

@kelset
Copy link
Contributor

kelset commented Jul 19, 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!

@gengjiawen
Copy link
Author

gengjiawen commented Jul 19, 2018

@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
Copy link

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

@kelset
Copy link
Contributor

kelset commented Jul 26, 2018

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

@jfaller30
Copy link

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
Copy link

This is no longer a problem under 0.57.

@salujaharkirat
Copy link

i am still facing this problem on 0.57.2 ...

@aeleftheriadis
Copy link

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

@Dimous
Copy link

Dimous commented Oct 12, 2018

Try 0.57.3

@pocesar
Copy link

pocesar commented Nov 5, 2018

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

@EvertonCosmo
Copy link

any feasible solution?

1 similar comment
@GabrielDuarteJr
Copy link

any feasible solution?

@hashan41
Copy link

Babel runtime dev dependency missing

npm install @babel/runtime --save-dev

@ofirgeller
Copy link

Does not work for me.
using react native 0.59

@philippkolbe
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests