Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
marksturm opened this issue Oct 4, 2018 · 20 comments
Labels
Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. Resolution: Locked This issue was locked by the bot. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.

Comments

@marksturm
Copy link

marksturm commented Oct 4, 2018

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
Copy link

mfclarke commented Oct 4, 2018

Looks like the same issue #21486

@ahardin
Copy link

ahardin commented Oct 4, 2018

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.

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

marksturm commented Oct 4, 2018

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

@alex-wgsn
Copy link

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
Copy link

Same here on a brand new react-native init.

@julienR2
Copy link

julienR2 commented Oct 4, 2018

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
Copy link
Author

marksturm commented Oct 5, 2018

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
Copy link

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
Copy link

julienR2 commented Oct 5, 2018

@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
Copy link

whether the native version 0.57.2 react is often an error?

@idk-whatever
Copy link

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
Copy link

andrewasfa commented Oct 5, 2018

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
Copy link
Contributor

sunnylqm commented Oct 5, 2018

ping @grabbou @kelset

@icecreamsandwich
Copy link

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

react_native_57_issue

@idk-whatever
Copy link

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

@icecreamsandwich
Copy link

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

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

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
Copy link
Contributor

kelset commented Oct 5, 2018

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`

@facebook facebook locked as resolved and limited conversation to collaborators Oct 5, 2018
@hramos
Copy link
Contributor

hramos commented Oct 5, 2018

Could we have done something in CI to catch this?

@kelset
Copy link
Contributor

kelset commented Oct 8, 2018

@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 react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. Resolution: Locked This issue was locked by the bot. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.
Projects
None yet
Development

No branches or pull requests