react-native init generate broken application (dependencies)

[vovkasm]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• 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
> RNUploadSample@0.0.1 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:

├─┬ jest@23.6.0
│ └─┬ jest-cli@23.6.0
│   ├── jest-haste-map@23.6.0
│   ├─┬ jest-runner@23.6.0
│   │ └── jest-haste-map@23.6.0
│   └─┬ jest-runtime@23.6.0
│     └── jest-haste-map@23.6.0
└─┬ react-native@0.57.7
  ├─┬ metro@0.48.3
  │ └── jest-haste-map@24.0.0-alpha.2
  └─┬ metro-core@0.48.3
    └── jest-haste-map@24.0.0-alpha.2  deduped

After hack:

├─┬ jest@23.6.0
│ └─┬ jest-cli@23.6.0
│   ├── jest-haste-map@23.6.0
│   ├─┬ jest-runner@23.6.0
│   │ └── jest-haste-map@23.6.0
│   └─┬ jest-runtime@23.6.0
│     └── jest-haste-map@23.6.0
├── jest-haste-map@23.6.0
└─┬ react-native@0.57.7
  ├─┬ metro@0.48.3
  │ └── UNMET DEPENDENCY jest-haste-map@24.0.0-alpha.2
  └─┬ metro-core@0.48.3
    └── UNMET DEPENDENCY jest-haste-map@24.0.0-alpha.2

Other info

Potential duplicates: #21146

[suark]

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

[vovkasm]

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

[radetsky]

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

[obshksw]

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.

[suark]

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

[hramos]

It may have been introduced back in facebook/metro@039dedb. cc @rafeca

[brycedeneen]

Same issue for me, and the workaround worked.

[kelset]

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 ^)

[Dror-Bar]

How to enforce using Metro 0.48.2 with npm?

[kelset]

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

[vovkasm]

@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
Sample@0.0.1 /Users/vovkasm/tmp/Sample
├─┬ jest@23.6.0
│ └─┬ jest-cli@23.6.0
│   ├── jest-haste-map@23.6.0
│   ├─┬ jest-runner@23.6.0
│   │ └── jest-haste-map@23.6.0
│   └─┬ jest-runtime@23.6.0
│     └── jest-haste-map@23.6.0
└─┬ react-native@0.57.7
  ├─┬ metro@0.48.4
  │ └── jest-haste-map@24.0.0-alpha.2
  └─┬ metro-core@0.48.4
    └── jest-haste-map@24.0.0-alpha.2  deduped

[vovkasm]

Yea unfortunately metro@0.48.4 still requires jest-haste-map@24.0.0-alpha.2

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

[kelset]

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)