Metro bundler not working at all

[mrousavy]

Description

The Metro bundler apparently does not work at all in the newest react native version (0.63). I've spent almost 5 hours debugging this now.

Failed to construct transformer:  Error: Cannot find module 'metro/src/DeltaBundler/Worker'
Require stack:
- /Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/base/BaseWorkerPool.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/WorkerPool.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/index.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/WorkerFarm.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/Transformer.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/Bundler.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/IncrementalBundler.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/index.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/start/runServer.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/start/start.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/index.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js
- /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/cli.js
- /Users/mrousavy/.config/yarn/global/node_modules/react-native-cli/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
    at Function.resolve (internal/modules/cjs/helpers.js:81:19)
    at new BaseWorkerPool (/Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/base/BaseWorkerPool.js:65:28)
    at new WorkerPool (/Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/WorkerPool.js:30:1)
    at new JestWorker (/Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/index.js:131:26)
    at WorkerFarm._makeFarm (/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/WorkerFarm.js:152:12)
    at new WorkerFarm (/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/WorkerFarm.js:87:27)
    at new Transformer (/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/Transformer.js:146:24)
    at /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/Bundler.js:54:29
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/base/BaseWorkerPool.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/WorkerPool.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/jest-worker/build/index.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/WorkerFarm.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/Transformer.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/Bundler.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/IncrementalBundler.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/index.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/start/runServer.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/start/start.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/index.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js',
    '/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/cli.js',
    '/Users/mrousavy/.config/yarn/global/node_modules/react-native-cli/index.js'
  ]
}
[Mon Aug 10 2020 18:04:27.348]  BUNDLE  ./index.js 

error: TypeError: Cannot read property 'transformFile' of undefined
    at /Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/Bundler.js:87:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/Bundler.js:14:24)
    at _next (/Users/mrousavy/Projects/Springsale/app/node_modules/react-native/node_modules/@react-native-community/cli/node_modules/metro/src/Bundler.js:34:9)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.51 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.0, 30.0.0, 30.0.1
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 21.2.6472646
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_262 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create iOS/Android app
2. Try running it

Expected Results

It should run

Snack, code example, screenshot, or link to a repository:

[safaiyeh]

Hi @mrousavy thanks for the issue. I have had no issues building the application.

Couple things you can try:
• Delete your package-lock.json or yarn.lock file and reinstalling your dependencies.
• Run npx react-native doctor to diagnose environment issues

If these do not resolve your issue, could you provide a repo that demonstrates the error?

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[mrousavy]

@safaiyeh I installed metro-config 0.58 as a devDependency and suddenly it started working again. Took me a really long time to figure that one out, but it's because react-native doesn't take newer versions of metro-config so well.

[safaiyeh]

@mrousavy Glad you found a solution!

react-native doesn't take newer versions of metro-config so well

Hm how could React Native improve using metro-config? What did you bump into that was difficult?

[mrousavy]

@safaiyeh tbh I didn't have any problems using metro so far other than a few cache errors. I got a huge problem right now tho, which I still couldn't resolve! On Android I can't manage to get my app running, it somehow fails to load the bundle and crashes :(

I've created an issue for this here

[safaiyeh]

Closing! Thanks for the separate issue.