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

Created on 7 Oct 2018 · 28Comments · Source: facebook/react-native

I created the project and run it according to the official tutorial（https://facebook.github.io/react-native/docs/getting-started.html）, but the following error occurred：
bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js from /Users/victory/Desktop/React-Native-Learning/AwesomeProject/App.js: The module ./../react-transform-hmr/lib/index.js could not be found from /Users/victory/Desktop/React-Native-Learning/AwesomeProject/App.js. Indeed, none of these files exist:

/Users/victory/Desktop/React-Native-Learning/react-transform-hmr/lib/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
/Users/victory/Desktop/React-Native-Learning/react-transform-hmr/lib/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:697)
at ResolutionRequest.resolveDependency (/Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph.js:222:485)
at Object.resolve (/Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/lib/transformHelpers.js:149:25)
at dependencies.map.result (/Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:316:29)
at Array.map ()
at resolveDependencies (/Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:312:16)
at /Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:169:33
at Generator.next ()
at step (/Users/victory/Desktop/React-Native-Learning/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:271:307)

====================================================================================================================================================
AwesomeProject react-native info

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.2
CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 365.79 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
IDEs:
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.2 => 0.57.2
npmGlobalPackages:
react-native-cli: 2.0.1

Locked 📦Bundler

Source

VictDog

👍2

Most helpful comment

Solving the problem for now react-native start --reset-cache

m-inan on 7 Oct 2018

🎉6 👍5

All 28 comments

Solving the problem for now react-native start --reset-cache

m-inan on 7 Oct 2018

🎉6 👍5

Solving the problem for now react-native start --reset-cache

thank's, you save my time.

onyet on 7 Oct 2018

Duplicate of https://github.com/facebook/react-native/issues/21490

radeno on 8 Oct 2018

Problem solved by using react-native start --reset-cache
Thanks a lot @TPMinan

VictDog on 8 Oct 2018

Sorry, my use now doesn't seem to work, and I get an error.

PS C:\yumin\work\react\ym> react-native start --reset-cache
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  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
   C:\yumin\work\react\ym

warning: the transform cache was reset.
Loading dependency graph...events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8081
    at Object._errnoException (util.js:992:11)
    at _exceptionWithHostPort (util.js:1014:20)
    at Server.setupListenHandle [as _listen2] (net.js:1355:14)
    at listenInCluster (net.js:1396:12)
    at Server.listen (net.js:1480:7)
    at C:\yumin\work\react\ym\node_modules\metro\src\index.js:157:18
    at new Promise (<anonymous>)
    at Object.<anonymous> (C:\yumin\work\react\ym\node_modules\metro\src\index.js:156:12)
    at Generator.next (<anonymous>)
    at step (C:\yumin\work\react\ym\node_modules\metro\src\index.js:47:262)

Can someone explain?thanks

richardmyu on 9 Oct 2018

@richardmyu
Error: listen EADDRINUSE :::8081
Address in use. So you have already running Metro in another terminal don't you?

radeno on 9 Oct 2018

你先关掉其他运行的终端，在使用这个命令就可以了。@richardmyu

VictDog on 9 Oct 2018

@radeno
no,maybe inode.js,i close it,then

warning: the transform cache was reset.
Loading dependency graph, done.

... not work

richardmyu on 9 Oct 2018

@VictDog 其他进程都关闭了，只有powershell，变成这样

warning: the transform cache was reset.
Loading dependency graph, done.

如何就没有动静了

richardmyu on 9 Oct 2018

是的，这样表示你已经重置成功。然后你再次运行 react-native run-ios(或run-android) 就可以了 @richardmyu

VictDog on 9 Oct 2018

@VictDog 我也这么想过，所以我就是 react-native run-android，结果还是一样报错

richardmyu on 9 Oct 2018

@VictDog 解决了，原来是另外再开一个执行，我是直接关闭了再执行的。。。尴尬。总之，谢谢你的解答，这里附上我看到的解决地址：https://bbs.reactnative.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

richardmyu on 9 Oct 2018

额，好吧。react-native start --reset-cache 这条命令的意思是：开启react-native 服务并重置缓存。你之所以出现了上面那一大堆错误，是应为react-native 的服务本来就开启了，然后你又去开启，就报错了。你需要做的是把上一个react-native 服务关闭掉，然后保证 react-native start --reset-cache 这个命令的窗口开启，然后再开启新窗口执行react-native run-android 就可以了@richardmyu

VictDog on 9 Oct 2018

@richardmyu 我是在Mac 下面操作的，一次就成功解决了问题。其实也还好啦，遇到坑，多折腾几次，就好啦~~

VictDog on 9 Oct 2018

@VictDog 我是在 window 下开发，新手，这两天一直在坑里跳，哈哈哈

richardmyu on 9 Oct 2018

@VictDog 搞了一天在这找到解决方法谢谢啊

freecodemans on 9 Oct 2018

不错，这是否是治标不治本的方法，是否还要等官方最终解决方案，感觉还是在投机取巧一样

eugle on 9 Oct 2018

帮到你就好 @freecodemans

VictDog on 10 Oct 2018

确实是治标不治本，每次重新启动还是会出现这个问题 @mozibrand

VictDog on 10 Oct 2018

您关闭了这个问题，但是这个问题并没有得到很好的解决。@gengjiawen
每次重新启动之后还必须使用react-native start --reset-cache 这个命令，才能启动成功。@TPMinan

VictDog on 10 Oct 2018

Looks like it's a metro issue, check the duplicate issue for solution.

gengjiawen on 10 Oct 2018

I know that I have read the answers to the duplicate issue, and the problems have not been solved very well. I tried, except for the use of react-native start --reset-cache, other methods are invalid @gengjiawen

VictDog on 10 Oct 2018

Every time I restart the project, I must use react-native start --reset-cache. Otherwise, the same problem will still occur. Is there a way to do it once and for all? @gengjiawen @react-native-bot

VictDog on 10 Oct 2018

@VictDog did you try update metro to 0.48?

radeno on 10 Oct 2018

what should i do??