React-native: Metro Bundler has encountered an internal error, app fails to load

[billscheidel]

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

1. react-native init AwesomeProject
2. cd AwesomeProject/
3. 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.

[rocampana]

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

[billscheidel]

I'm seeing this with the default app which doesn't require any images that way. Seems like whatever problem I'm having is a different issue.

[billscheidel]

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.

[arapocket]

I have this same issue and I'm on node 8.9.4

[sergiofraile]

Me 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

[MoOx]

Actually it's a RN problem. See https://github.com/facebook/react-native/pull/17672

[cylepsy]

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.

[piranna]

I'm having the same problem with Android SDK using latests React Native and Node.js 9.5.0.

[rommyarb]

I'm having this error too.

If i remove the
import FontAwesome from 'react-native-vector-icons/FontAwesome';
the error gone

[frndev]

I simply closed the iOS simulator and executed npm run ios to solve the bug

[Air-Rands]

I had the same issue and after trying everything here, lead me to the right one.
In the ios>"Your Main Project Folder">AppDelegate.m .

update
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

to be
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

[wzup]

FWIW

Same error on virtual android device (see screenshot).

In my case this error was thrown because I had node.js app and node inspector running on my machine:

node.js:  localhost:3000
node inspector: Debugger listening on ws://127.0.0.1:9229/

I killed all node processes and the error was not thrown again.
Don't know whose falt this is, of Android Studio or of react-native, but it is not good that they fail to throw correct informative errors.

[2beens]

In my case, the problem was solved by restarting the node server, hosting the react app. Hope it helps somebody.

[ashishlamse]

Need to restart packager. npm start from root folder.

[ihsanktmr]

delete node_modules then npm install worked for me

[sayasajer]

reset npm cache work for me.

npm start -- --reset-cache

[goodhyun]

If it insists that

error: bundling failed: Error: jest-haste-map: @providesModule naming collision:
Duplicate module name: react-native

and you are not:

try just watchman watch-del-all

[marlosirapuan]

same here. In my case I solved with this:

kill $(lsof -t -i:8081)

and build again on device

[baoxiehao]

@marlosirapuan It works for me, thanks

[rommonz]

thanks @marlosirapuan

[sandhyam1995]

i had the same issue. Then I restart my system after that create a new project it works. but the old one doesn't .
That always show this error. How can I solve that, I'm using :
npm: 3.5.2
react-native-cli: 2.0.1
react-native: 0.55.4
java:1.8.0.191