React-native: error: bundling failed: Error: Unable to resolve module `./../react-transform-hmr/lib/index.js`

[marksturm]

Environment

Marks-MBP:testpro sturm$ react-native info

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Memory: 1.78 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.3.0 - /usr/local/bin/node
Yarn: 1.2.1 - /usr/local/bin/yarn
npm: 5.3.0 - /usr/local/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 26.0.3, 27.0.3
API Levels: 23, 26, 27
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.2 => 0.57.2
npmGlobalPackages:
create-react-native-app: 0.0.6
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-init: 0.6.7
react-native-macos-cli: 2.0.1
react-native-own-bridge: 0.0.3
react-native-rename: 2.1.7

Description

After a fresh init i get this error: error: bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js from /Users/sturm/Desktop/testpro/App.js

Reproducible Demo

react-native init testpro
cd testpro
react-native run-android

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js from /Users/sturm/Desktop/testpro/App.js: The module ./../react-transform-hmr/lib/index.js could not be found from /Users/sturm/Desktop/testpro/App.js. Indeed, none of these files exist:

• /Users/sturm/Desktop/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/sturm/Desktop/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/sturm/Desktop/testpro/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:697)
  at ResolutionRequest.resolveDependency (/Users/sturm/Desktop/testpro/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
  at DependencyGraph.resolveDependency (/Users/sturm/Desktop/testpro/node_modules/metro/src/node-haste/DependencyGraph.js:222:485)
  at Object.resolve (/Users/sturm/Desktop/testpro/node_modules/metro/src/lib/transformHelpers.js:149:25)
  at dependencies.map.result (/Users/sturm/Desktop/testpro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:316:29)
  at Array.map ()
  at resolveDependencies (/Users/sturm/Desktop/testpro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:312:16)
  at /Users/sturm/Desktop/testpro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:169:33
  at Generator.next ()
  at step (/Users/sturm/Desktop/testpro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:271:307)

[mfclarke]

Looks like the same issue #21486

[ahardin]

I am getting the same error/messages with the same reproduction steps. I've tried virtually every possible combination of cache clearing, reinstalling, etc.

@mfclarke Possibly, but I believe it's different. OP in #21486 is getting errors for @babel/runtime. You, me and Mark are getting it for react-transform-hmr. Additionally, our error message doesn't include the list of possible resolutions like #21486 (clear watchman watches, reset Metro cache, etc.), which leads me to believe the root cause is different.

[marksturm]

i tried also simple to reinstall react-transform-hmr but endet up in the same error.

[alex-wgsn]

getting same error. I tried to put a copy of react-transform-hmr in the location where it was being looked for. but no luck

[NNaidoo]

Same here on a brand new react-native init.

[julienR2]

Same error on fresh react-native init..
I also tried to remove the dependency and use babel-preset-react-native-stage-0 instead (as it is set up in a fresh Expo init), but I keep getting the same mistake.

And when downgrading to [email protected] I get

/Users/nowmad/workspace/toby/android/app/src/main/java/com/toby/MainApplication.java:5: error: cannot find symbol
import com.facebook.react.ReactApplication;
                         ^
  symbol:   class ReactApplication
  location: package com.facebook.react
/Users/nowmad/workspace/toby/android/app/src/main/java/com/toby/MainApplication.java:6: error: cannot find symbol
import com.facebook.react.ReactNativeHost;
                         ^
  symbol:   class ReactNativeHost
  location: package com.facebook.react
/Users/nowmad/workspace/toby/android/app/src/main/java/com/toby/MainApplication.java:14: error: cannot find symbol
public class MainApplication extends Application implements ReactApplication {

Any version of react-native working with a fresh start react-native ?

[marksturm]

Any version of react-native working with a fresh start react-native ?

"0.57.1" is working but after init you have to
npm install @babel/runtime

[mathewmorris]

Any version of react-native working with a fresh start react-native ?

"0.57.1" is working but after init you have to
npm install @babel/runtime

So, did this as well but still getting the same error as you. Though I did get this warning:
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.

[julienR2]

@marksturm 0.57.1 worked indeed 👍Thanks
@mathewmorris I still had to

• remove node_modules: rm -rf node_modules
• clear react-native cache and watchman: rm -rf $TMPDIR/react-* && watchman watch-del-all"
• install back all packages: yarn install

Then finally react-native run-android worked.

I'll keep to this version until 0.57.2 get fixed

[salmansayyidulhaq]

whether the native version 0.57.2 react is often an error?

[idk-whatever]

This issue only happens when react-native 0.57.2 is installed.

It seems like the Metro Bundler has an issue resolving the paths when started from ./node_modules/react-native/scripts/packager.sh.

Starting the Metro Bundler directly from the project directory works for me. Can someone let me know if it works for them too?

# Clean cache
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

# Start Metro Bundler directly
react-native start

# Now run `react-native run-android` or `react-native run-ios` in another tab

[andrewasfa]

This issue only happens when react-native 0.57.2 is installed.

It seems like the Metro Bundler has an issue resolving the paths when started from ./node_modules/react-native/scripts/packager.sh.

Starting the Metro Bundler directly from the project directory works for me. Can someone let me know if it works for them too?

# Clean cache
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

# Start Metro Bundler directly
react-native start

# Now run `react-native run-android` or `react-native run-ios` in another tab

I did a new init with 0.57.2 , cleaned the cache, started the Metro Bundler and in another terminal ran 'run-android', and that worked. Thanks for the post @idk-whatever

But I might stick with 0.57.1 for now. Thank you @marksturm for the workaround.
Phew, hopefully this will be the last issue today. Had a cart wheel of problems managing dependencies.

[sunnylqm]

ping @grabbou @kelset

[icecreamsandwich]

I have react 0.57 and running in to the same issue , i removed node_modules , cleaned cache and re installed
dependencies ( npm cache clean --force && npm install ), but no luck ..

[idk-whatever]

@icecreamsandwich I don't know where the Metro Bundler cache is stored on Windows. Can you try react-native start --reset-cache

[icecreamsandwich]

@icecreamsandwich I don't know where the Metro Bundler cache is stored on Windows. Can you try react-native start --reset-cache

WOW ! that worked :+1: Thanks !

[idk-whatever]

The underlying issue is that metro-react-native-babel-preset tries to create a relative path from every file to react-transform-hmr/lib/index.js but uses the current working directory instead of the project root.

This is how I fixed it in the end. I have never used Babel and the file hasn’t been changed in the previous releases so I’ll leave the PR to someone else.

node_modules/metro-react-native-babel-preset/src/configs/hmr.js

// ...
var path = require('path');
var hmrTransform = 'react-transform-hmr/lib/index.js';
var transformPath = require.resolve(hmrTransform);

module.exports = function (options, filename) {
  var filePath = path.resolve(options.projectRoot, path.dirname(filename));

  var transform = filename ?
  './' + path.relative(filePath, transformPath) // packager can't handle absolute paths
  : hmrTransform;
// ...

[kelset]

Ok thanks everyone for reporting, we'll look into it.

I'm going to lock this issue and re-write the solution by @idk-whatever so that people that end up here can follow them while we work on a fix:

# Clean cache
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

# Open a new tab and Start Metro Bundler directly from the project folder
react-native start  --reset-cache

# Now run `react-native run-android` or `react-native run-ios`

[hramos]

Could we have done something in CI to catch this?

[kelset]

@hramos not sure, because I think that it would be something to be tested on the "Metro CI" side - but not even sure about it, since the issue was about the run command spawning the instance of the bundler 🤔 The underlying issue is that the version of Metro that react-native init uses is latest and is not fixed, so that's another way we could approach having this kind of issues.

(BTW new version of Metro landed, if you reinstall your node_modules and check if Metro 0.48 is installed now it should work)