react-native init generate broken application (dependencies)

Created on 11 Dec 2018 · 21Comments · Source: facebook/react-native

[x] Review the documentation: https://facebook.github.io/react-native
[x] Search for existing issues: https://github.com/facebook/react-native/issues
[x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (8) x64 Intel(R) Core(TM) i7-3740QM CPU @ 2.70GHz
      Memory: 6.17 GB / 16.00 GB
      Shell: 5.6.2 - /usr/local/bin/zsh
    Binaries:
      Node: 11.3.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27
        Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.3, 26.0.2, 26.0.3, 27.0.1, 27.0.2
        System Images: android-23 | Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1
      react-native: 0.57.7 => 0.57.7
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

Fresh project is unusable with this error:

> npm start
> [email protected] start /Volumes/work/RNUploadSample
> node node_modules/react-native/local-cli/cli.js start

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  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
   /Volumes/work/RNUploadSample

Loading dependency graph...(node:36207) UnhandledPromiseRejectionWarning: Error: Cannot find module 'jest-serializer'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at _load_jestSerializer (/Volumes/work/RNUploadSample/node_modules/jest-haste-map/build/index.js:164:52)
    at HasteMap._persist (/Volumes/work/RNUploadSample/node_modules/jest-haste-map/build/index.js:781:25)
    at _buildPromise._buildFileMap.then.then.hasteMap (/Volumes/work/RNUploadSample/node_modules/jest-haste-map/build/index.js:425:16)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:36207) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:36207) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:36207) UnhandledPromiseRejectionWarning: Error: Cannot find module 'jest-serializer'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at _load_jestSerializer (/Volumes/work/RNUploadSample/node_modules/jest-haste-map/build/index.js:164:52)
    at HasteMap._persist (/Volumes/work/RNUploadSample/node_modules/jest-haste-map/build/index.js:781:25)
    at _buildPromise._buildFileMap.then.then.hasteMap (/Volumes/work/RNUploadSample/node_modules/jest-haste-map/build/index.js:425:16)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:36207) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

How to reproduce

> react-native init Sample
> cd Sample
> rm -rf yarn.lock node_modules
> npm install
> npm start

Workaround

There is hack to fix this, is adding "jest-haste-map": "23.6.0" to package.json

Before hack (output of npm ls jest-haste-map:

├─┬ [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   └─┬ [email protected]
│     └── [email protected]
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  └─┬ [email protected]
    └── [email protected]  deduped

After hack:

├─┬ [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├── [email protected]
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── UNMET DEPENDENCY [email protected]
  └─┬ [email protected]
    └── UNMET DEPENDENCY [email protected]

Other info

Potential duplicates: https://github.com/facebook/react-native/issues/21146

Regression Locked 📦Bundler

Source

vovkasm

👍4

Most helpful comment

Weirdly enough, I updated my project from react-native 0.55.4 to 0.57.7 and the error was not occuring.
It started occuring after I deleted my node_modules folder and package-lock.json file.

npm i jest-serializer does "fix" the problem for me though.

obshksw on 11 Dec 2018

👍6 ❤1 🎉1

All 21 comments

@vovkasm Which package.json did you add it to? I'm trying to solve something similar. Do you mean react-native's package.json or your projects?

suark on 11 Dec 2018

@suark I have only one package.json file in the root of application folder. That file was initially generated by react-native init command. So yes, it is my projects file.

vovkasm on 11 Dec 2018

@vovkasm Which package.json did you add it to? I'm trying to solve something similar. Do you mean react-native's package.json or your projects?

in the root directory of your react-native project.

radetsky on 11 Dec 2018

Weirdly enough, I updated my project from react-native 0.55.4 to 0.57.7 and the error was not occuring.
It started occuring after I deleted my node_modules folder and package-lock.json file.

npm i jest-serializer does "fix" the problem for me though.

obshksw on 11 Dec 2018

👍6 ❤1 🎉1

Thanks very much. Currently working for me.

We are using react-native 0.57.5 right now. This fix, or "hack", has worked for us. I don't like not understanding it, but it works...

suark on 11 Dec 2018

It may have been introduced back in https://github.com/facebook/metro/commit/039dedb4aaf5c0002c8e2f82279fbb5a6849ea69. cc @rafeca

hramos on 11 Dec 2018

👍2

Same issue for me, and the workaround worked.

brycedeneen on 12 Dec 2018

So, yeah, it's caused by 0.48.3 - I talked with @rafeca a while back and we agreed that 0.48.3 was going to be removed from npm to avoid this issue (basically, this release - as pointed out - requires the wrong version of jest haste map) but it seems that the Metro team never had time to do it 😕

A "cleaner" workaround for now would be to enforce using Metro 0.48.2 via yarn resolutions.

(as an alternative, for 0.57.8, I could do a local commit to the branch to enforce the fixed 0.48.2 without the ^)

kelset on 12 Dec 2018

How to enforce using Metro 0.48.2 with npm?

Dror-Bar on 12 Dec 2018

Ok so I managed to reach out to the Metro team, they just published 0.48.4, which has the same content as 0.48.2, so if you clean up your yarn.lock & node_modules and reinstall it should now install 0.48.4 and the issue reported should not be there anymore.

(Thanks @rafeca!)

kelset on 12 Dec 2018

🎉1

@kelset Perfect! Thank you for fast reaction!

Just run my test case:

> react-native init Sample
> cd Sample
> rm -rf yarn.lock node_modules
> npm install
> npm start

Hmm... something still not good:

npm ls jest-haste-map                                                                                                                                                                             ~/tmp/Sample
[email protected] /Users/vovkasm/tmp/Sample
├─┬ [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   └─┬ [email protected]
│     └── [email protected]
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  └─┬ [email protected]
    └── [email protected]  deduped

vovkasm on 12 Dec 2018

Yea unfortunately [email protected] still requires [email protected]

Moreover, tag v0.48.4 even not exists (currently) at github repo, so I can't investigate futher

vovkasm on 12 Dec 2018

~uhm :/ Ok I'll ping them again, something must have gone wrong with it... if you use yarn resolutions to enforce 0.48.2 does it solves it for you?~
(see my latest comment)

kelset on 12 Dec 2018

Hey @vovkasm! I did the publish manually from a local repo, with the same contents of the version v0.48.2.

I've just pushed the branch to github: https://github.com/facebook/metro/tree/v0.48.x

if the conflicting commit is https://github.com/facebook/metro/commit/039dedb4aaf5c0002c8e2f82279fbb5a6849ea69, then it means I'll need to publish another version based on v0.48.1.

Can you confirm that?

rafeca on 12 Dec 2018

AH yeah I was about to write the same, by looking at the release notes it seems that 0.48.2 was in fact the one upgrading the jest - I have misremembered 🤦‍♂️

Sorry everyone 🤦‍♂️
So yeah I guess we should do the new version based on 0.48.1 - but I'd prefer to wait for @vovkasm feedback first.

kelset on 12 Dec 2018

@rafeca , @kelset
Yes confirm. Seems like https://github.com/facebook/metro/blob/v0.48.x/packages/metro/package.json#L37 still contains dependency on jest 24.0.0-alpha.2
Also v0.48.2: https://github.com/facebook/metro/blob/v0.48.2/packages/metro/package.json#L37

And that one tagged as v0.48.1 didn't:
https://github.com/facebook/metro/blob/v0.48.1/packages/metro/package.json#L37

vovkasm on 12 Dec 2018

Ok, thanks! I'm gonna unpublish v0.48.4 and publish v0.48.5 with the contents of v0.48.1

rafeca on 12 Dec 2018

👍2

Ok, v0.48.5 has been published, the branch on GH has been updated to point to it: https://github.com/facebook/metro/tree/v0.48.x

rafeca on 12 Dec 2018

Thanks @rafeca, @kelset! I'm slightly modify test case (because Sample package lives in Libraries folder of react-native project and leads to another conflict in haste :-D )

> react-native init Sample1
> cd Sample1
> rm -rf yarn.lock node_modules
> npm install
> npm start

Now it works as expected! Also I'm tested that application actually run in ios simulator.

Should I close this issue by myself?

vovkasm on 12 Dec 2018

ok awesome, yeah feel free to close :)

kelset on 12 Dec 2018

Close, because issue was resolved by publishing [email protected]

vovkasm on 12 Dec 2018

Was this page helpful?

0 / 5 - 0 ratings

Related issues

App Crash on Android OS 6 Samsung Galaxy S7 SM-G930FD (JSC Crash) 64 bit support A/libc: Fatal signal 11 (SIGSEGV)

dishantwalia · 190Comments

Add support for AlarmManager in Timing to allow proper handling of long timers

astreet · 173Comments

iOS: NetInfo.isConnected returns always false

rkostrab · 139Comments

React Native 0.62.* [TypeError: Network request failed] on file upload

abumostafa · 263Comments

Xcode 10: third-party: 'config.h' file not found

joncursi · 134Comments