React-native: Following "Building Projects..." Docs Produces Error: "Development server returned response error code: 500"

[opticalfalicy]

• [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: Windows 7
CPU: x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Memory: 2.38 GB / 15.96 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Filesnodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5014246

Description

After following the react-native guide to both setup my react-native app, and my android studio AVD, I have received my current error (I will paste it in full below).

Prior to posting I tried to search around, and couldn't find any recent solutions, or working ones. I had tried downgrading react-native to version 55,2, but ran into other errors. I have also tried the four steps the console produces (clear watchman, delete node_modules, etc). Other than what was installed with react-native init, I have no other dependencies.

---

package.json:
{
"name": "metronome",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.55.2"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.47.0",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}

---

Error:

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"originModulePath":"C:\Code\Self-Projects\Metronome\nativeMetronome\index.js","targetModuleName":"@babel/runtime/helpers/interopRequireDefault","message":"Unable to resolve module @babel/runtime/helpers/interopRequireDefault from C:\\Code\\Self-Projects\\Metronome\\nativeMetronome\\index.js: Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.\n 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.","errors":[{"description":"Unable to resolve module @babel/runtime/helpers/interopRequireDefault from C:\\Code\\Self-Projects\\Metronome\\nativeMetronome\\index.js: Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.\n 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*."}],"name":"Error","stack":"Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from C:\\Code\\Self-Projects\\Metronome\\nativeMetronome\\index.js: Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.\n 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.\n at ModuleResolver.resolveDependency (C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:1301)\n at ResolutionRequest.resolveDependency (C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)\n at DependencyGraph.resolveDependency (C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\node-haste\DependencyGraph.js:238:485)\n at Object.resolve (C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\lib\transformHelpers.js:180:25)\n at dependencies.map.result (C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\DeltaBundler\traverseDependencies.js:311:29)\n at Array.map ()\n at resolveDependencies (C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\DeltaBundler\traverseDependencies.js:307:16)\n at C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\DeltaBundler\traverseDependencies.js:164:33\n at Generator.next ()\n at step (C:\Code\Self-Projects\Metronome\nativeMetronome\node_modules\metro\src\DeltaBundler\traverseDependencies.js:266:307)"}
processBundleResult
BundleDownloader.java:296
access$200
BundleDownloader.java:37
onResponse
BundleDownloader.java:174
execute
RealCall.java:153
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1162
run
ThreadPoolExecutor.java:636
run
Thread.java:764

---

Reproducible Demo

Follow this guide on a Windows 7 machine:

https://facebook.github.io/react-native/docs/getting-started.html

[mfclarke]

I see the same on macOS, but with a different dependency. Copy of error from the emulator:

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"originModulePath":"/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js","targetModuleName":"./../react-transform-hmr/lib/index.js","message":"Unable to resolve module `./../react-transform-hmr/lib/index.js` from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`: The module `./../react-transform-hmr/lib/index.js` could not be found from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`. Indeed, none of these files exist:
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`","errors":[{"description":"Unable to resolve module `./../react-transform-hmr/lib/index.js` from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`: The module `./../react-transform-hmr/lib/index.js` could not be found from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`. Indeed, none of these files exist:
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`"}],"name":"Error","stack":"Error: Unable to resolve module `./../react-transform-hmr/lib/index.js` from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`: The module `./../react-transform-hmr/lib/index.js` could not be found from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`. Indeed, none of these files exist:
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:697)
    at ResolutionRequest.resolveDependency (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/node-haste/DependencyGraph.js:222:485)
    at Object.resolve (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/lib/transformHelpers.js:149:25)
    at dependencies.map.result (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:316:29)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:312:16)
    at /Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:169:33
    at Generator.next (<anonymous>)
    at step (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:271:307)"}
processBundleResult
    BundleDownloader.java:296
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:174
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1113
run
    ThreadPoolExecutor.java:588
run
    Thread.java:818

Output of metro bundler:

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  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
   /Users/maxclarke/Development/ReactNative/NotesTestRig 

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `./../react-transform-hmr/lib/index.js` from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`: The module `./../react-transform-hmr/lib/index.js` could not be found from `/Users/maxclarke/Development/ReactNative/NotesTestRig/App.js`. Indeed, none of these files exist:
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/Users/maxclarke/Development/ReactNative/react-transform-hmr/lib/index.js/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:697)
    at ResolutionRequest.resolveDependency (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/node-haste/DependencyGraph.js:222:485)
    at Object.resolve (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/lib/transformHelpers.js:149:25)
    at dependencies.map.result (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:316:29)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:312:16)
    at /Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:169:33
    at Generator.next (<anonymous>)
    at step (/Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/metro/src/DeltaBundler/traverseDependencies.js:271:307)

It looks like it's trying to find dependencies at the wrong location. It's looking in /Users/maxclarke/Development/ReactNative/react-transform-hmr when it should be looking in /Users/maxclarke/Development/ReactNative/NotesTestRig/node_modules/react-transform-hmr.

[ahardin]

Did you try:
npm add @babel/runtime
npm install
as shown in #21310?

[opticalfalicy]

@ahardin I will attempt that right now and report back what it does.

[opticalfalicy]

It got me past my initial error, but I've run into the same one that I got when I had tried the downgrade route.

This error looks like:

[kelset]

Seems to me that this bundler issue is the same as https://github.com/facebook/react-native/issues/21490, can you try the workaround described there, and if you recognize that the issue is the same please close this so that we can keep everyone on the other one and avoid redundancy?

[opticalfalicy]

I tried adding babel to the runtime on the most recent release and it's working, and I didn't run into my second error.

Will close the issue, but just to be explicit in the report of my solution; my issue was solved by @ahardin's suggestion to:

npm add @babel/runtime
npm install

[javierpomachagua]

Replace package.json to:

{
  "name": "albums",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.45.3",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Then follow this steps as is described in Link

Go to your project directory and check if this folder exists android/app/src/main/assets
i) If it exists then delete two files viz index.android.bundle and index.android.bundle.meta
ii) If the folder assets doesn't exist then create the assets directory there.

From your root project directory do

cd android
./gradlew clean

Finally, navigate back to the root directory and check
i) If there is only one file i.e. index.js then run following command
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

ii) If there are two files i.e index.android.js and index.ios.js then run this
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Now run react-native run-android

[UnnikrishnanBhargavakurup]

same error any update?

[anand-y]

run

react-native init --version="0.55.4" MyProject

rather than >react-native init MyProject

[tapz]

I get this when trying to start a product flavor.