react-native: Metro Bundler has encountered an internal error, app fails to load
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment: OS: macOS Sierra 10.12.6 Node: 9.4.0 Yarn: 1.3.2 npm: 5.6.0 Watchman: 4.9.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: 2.3 AI-162.3871768
Packages: (wanted => installed) react: 16.2.0 => 16.2.0 react-native: 0.52.0 => 0.52.0
Steps to Reproduce
- react-native init AwesomeProject
- cd AwesomeProject/
- react-native run-ios
Expected Behavior
App should open without errors in the simulator.
Actual Behavior
2018-01-20 06:56:30.960 [info][tid:main][RCTCxxBridge.mm:210] Initializing <RCTCxxBridge: 0x6040001c9d80> (parent: <RCTBridge: 0x6000000c6740>, executor: (null))
2018-01-20 06:56:30.963580-0800 AwesomeProject[72638:2085234] Initializing <RCTCxxBridge: 0x6040001c9d80> (parent: <RCTBridge: 0x6000000c6740>, executor: (null))
2018-01-20 06:56:31.034 [warn][tid:main][RCTBridge.m:120] Class RCTCxxModule was not exported. Did you forget to use RCT_EXPORT_MODULE()?
2018-01-20 06:56:31.034678-0800 AwesomeProject[72638:2085234] Class RCTCxxModule was not exported. Did you forget to use RCT_EXPORT_MODULE()?
2018-01-20 06:56:31.066 [warn][tid:main][RCTModuleData.mm:69] Module RCTImageLoader requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
2018-01-20 06:56:31.065913-0800 AwesomeProject[72638:2085234] Module RCTImageLoader requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
2018-01-20 06:56:31.095 [info][tid:main][RCTRootView.m:302] Running application AwesomeProject ({
initialProps = {
};
rootTag = 1;
})
2018-01-20 06:56:31.095703-0800 AwesomeProject[72638:2085234] Running application AwesomeProject ({
initialProps = {
};
rootTag = 1;
})
2018-01-20 06:56:31.250 [error][tid:NSOperationQueue 0x6040000399e0 (QOS: UNSPECIFIED)][RCTCxxBridge.mm:419] Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Metro Bundler has encountered an internal error, please check your terminal error output for more details (null))
2018-01-20 06:56:31.250740-0800 AwesomeProject[72638:2085588] Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Metro Bundler has encountered an internal error, please check your terminal error output for more details (null))
Reproducible Demo
Default app created using react-native init exhibits the issue. I also tried to downgrade to 0.51 but I’m seeing the same issue.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 21 (1 by maintainers)
same here. In my case I solved with this:
and build again on device
I have this same issue and I’m on node 8.9.4
I simply closed the iOS simulator and executed
npm run iosto solve the bugIn my case, the problem was solved by restarting the node server, hosting the react app. Hope it helps somebody.
I’ve got the same issue with you. if I remove the line
import Ionicons from 'react-native-vector-icons/Ionicons';the app will start. I am also using stack navigator from react-navigation and react-native-elements. I’m not sure if there’s some conflicts between them.reset npm cache work for me.
npm start -- --reset-cacheMe too, I was updating an app to RN 0.52 and this issue keeps popping up. I did notice that the only way the app seems to start is when commenting my import of the Navigation stack (provided by react-navigation). Wonder if it’s any issue with the images as well. What way should we import them if removing the requires? Didn’t read anything about it in the changelogs. I also tried with node 8.9.4 and same issue.
Update: I actually think my issue is related to this one https://github.com/oblador/react-native-vector-icons/issues/626
React-Native doesn’t work with Node v9.4. When I went through the quickstart guide I just saw that it needed to be greater than Node 4, but missed the message when doing the install that there was a more constrained set of versions that work. After downgrading to Node v8 everything seems to be working again.
I’m seeing this with the default app which doesn’t
requireany images that way. Seems like whatever problem I’m having is a different issue.I’m having this error too.
If i remove the
import FontAwesome from 'react-native-vector-icons/FontAwesome';the error goneDo you have any require image like this:
require("../images/login_bg.png")?I’m facing the same issue, if I remove all ‘requires’ to images the error go away.