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

marksturm · 2018-10-04T22:13:00Z

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)

The text was updated successfully, but these errors were encountered:

mfclarke · 2018-10-04T22:23:22Z

Looks like the same issue #21486

ahardin · 2018-10-04T23:02:55Z

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 · 2018-10-04T23:09:04Z

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

alex-wgsn · 2018-10-04T23:15:21Z

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

nolindnaidoo · 2018-10-04T23:20:33Z

Same here on a brand new react-native init.

julienR2 · 2018-10-04T23:31:56Z

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 react-native@0.57.0 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 · 2018-10-05T01:47:30Z

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 · 2018-10-05T02:27:01Z

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/plugin-check-constants@7.0.0-beta.38 requires a peer of @babel/core@7.0.0-beta.38 but none is installed. You must install peer dependencies yourself.

julienR2 · 2018-10-05T02:37:10Z

@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 · 2018-10-05T02:49:23Z

whether the native version 0.57.2 react is often an error?

idk-whatever · 2018-10-05T04:09:19Z

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 · 2018-10-05T04:24:57Z

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 · 2018-10-05T04:37:46Z

ping @grabbou @kelset

icecreamsandwich · 2018-10-05T06:22:17Z

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 · 2018-10-05T06:32:16Z

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

icecreamsandwich · 2018-10-05T06:49:37Z

@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 👍 Thanks !

idk-whatever · 2018-10-05T08:04:07Z

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 · 2018-10-05T08:05:50Z

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 · 2018-10-05T16:49:56Z

Could we have done something in CI to catch this?

kelset · 2018-10-08T08:40:17Z

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

react-native-bot added the Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used. label Oct 4, 2018

kelset added the Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. label Oct 5, 2018

facebook locked as resolved and limited conversation to collaborators Oct 5, 2018

facebook-github-bot closed this as completed in facebook/metro@e595178 Oct 5, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

marksturm commented Oct 4, 2018 •

edited

Loading

mfclarke commented Oct 4, 2018

ahardin commented Oct 4, 2018 •

edited

Loading

marksturm commented Oct 4, 2018 •

edited

Loading

alex-wgsn commented Oct 4, 2018

nolindnaidoo commented Oct 4, 2018

julienR2 commented Oct 4, 2018 •

edited

Loading

marksturm commented Oct 5, 2018 •

edited

Loading

mathewmorris commented Oct 5, 2018

julienR2 commented Oct 5, 2018

salmansayyidulhaq commented Oct 5, 2018

idk-whatever commented Oct 5, 2018

andrewasfa commented Oct 5, 2018 •

edited

Loading

sunnylqm commented Oct 5, 2018

icecreamsandwich commented Oct 5, 2018

idk-whatever commented Oct 5, 2018

icecreamsandwich commented Oct 5, 2018

idk-whatever commented Oct 5, 2018

kelset commented Oct 5, 2018

hramos commented Oct 5, 2018

kelset commented Oct 8, 2018

error: bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js #21490

error: bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js #21490

Comments

marksturm commented Oct 4, 2018 • edited Loading

Environment

Description

Reproducible Demo

mfclarke commented Oct 4, 2018

ahardin commented Oct 4, 2018 • edited Loading

marksturm commented Oct 4, 2018 • edited Loading

alex-wgsn commented Oct 4, 2018

nolindnaidoo commented Oct 4, 2018

julienR2 commented Oct 4, 2018 • edited Loading

marksturm commented Oct 5, 2018 • edited Loading

mathewmorris commented Oct 5, 2018

julienR2 commented Oct 5, 2018

salmansayyidulhaq commented Oct 5, 2018

idk-whatever commented Oct 5, 2018

andrewasfa commented Oct 5, 2018 • edited Loading

sunnylqm commented Oct 5, 2018

icecreamsandwich commented Oct 5, 2018

idk-whatever commented Oct 5, 2018

icecreamsandwich commented Oct 5, 2018

idk-whatever commented Oct 5, 2018

kelset commented Oct 5, 2018

hramos commented Oct 5, 2018

kelset commented Oct 8, 2018

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

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

marksturm commented Oct 4, 2018 •

edited

Loading

ahardin commented Oct 4, 2018 •

edited

Loading

marksturm commented Oct 4, 2018 •

edited

Loading

julienR2 commented Oct 4, 2018 •

edited

Loading

marksturm commented Oct 5, 2018 •

edited

Loading

andrewasfa commented Oct 5, 2018 •

edited

Loading