React-native: Packager / server only logs 'Failed building JavaScript bundle' and does not indicate the problematic file

[MFAshby]

Is this a bug report?

Yes.

Environment

1. react-native -v: 0.47.2
2. node -v: 6.11.2
3. npm -v: 3.10.10
4. Target Platform: Android
5. Development Operating System: Linux, Ubuntu 17.04
6. Build tools: just react-native

Steps to Reproduce

1. Attach Android device or emulator.
2. Clone the example project. git clone https://github.com/MFAshby/failuretest.git
3. Run npm start, in the project folder, then press a to run on attached Android device.
4. Get the below text in the console window for packager and development server.

11:09:39 PM: Starting Android...
› Press a to open Android device or emulator, or i to open iOS emulator.
› Press q to display QR code.
› Press r to restart packager, or R to restart packager and clear cache.
› Press d to toggle development mode. (current mode: development)
11:09:41 PM: Launching Dev Tools...
11:09:57 PM: Failed building JavaScript bundle
11:09:57 PM:
11:09:57 PM:

Expected Behavior

I would expect some kind of indication as to what bit of javascript is invalid (i.e. file and line number)

Actual Behavior

There is no indication where the javascript syntax is invalid. This slows the development process 'cos now I can't easily see where I've made syntax errors!

[pull-bot]

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I am going to close this, but feel free to open a new issue that meets the requirements set forth in the template. Thanks!

[findzen]

Please reopen. Regardless of the steps to reproduce, error messages should give more information than "Failed building JavaScript bundle". Is there a verbose option, or a log somewhere with more information?

[MFAshby]

I followed the template as requested. Reproduction information is right there under 'steps to reproduce'.

[hramos]

I've updated your issue to include a missing part of the template. This should keep the bot from closing your issue again.

[jmatsushita]

Given the information is not missing, I think the labels should also be removed no ?

[Hacalox]

Please delete the labels of this issue, all the info is on the OP post.
For the moment, how do you guys go through this? I can't handle this anymore, my developing time has increased a lot due to lack of info when writing code and receiving an error.

[Alexintosh]

Will downgrading solve the issue? Which version?

[MFAshby]

Don't know. Try following the reproduction steps, then downgrade and try again.

[jmatsushita]

It seems that this error comes from the react-native-scripts package on this line.

[jmatsushita]

I'm using expo and deactivating the remote debugger (shaking the phone and clicking stop remote debugging) makes the bundler error message show up on the phone. Better than nothing.

[joeytwiddle]

Usually this error is displayed in Expo, but sometimes Expo won't show it, either because:

• The first build fails so nothing is pushed to Expo
• The previous build failed. Expo shows the error from the previous build, but not the new error!

The easiest solution is to keep your Expo in a good state. I have found Expo running in the iOS Simulator a bit more user friendly than Expo running in the Android Emulator.

For those of you who are stuck in a situation where Expo is not showing the error... I did manage to get the error logged, but it wasn't pretty!

Starting with jmatsushita's pointer I made the following changes:

## In node_modules/react-native-scripts/build/util/packager.js
        _log2.default.withTimestamp(_chalk2.default.red('Failed building JavaScript bundle'));
+       _log2.default.withTimestamp(String(err));
## There are TWO lines where you can do this
## But this only showed the error: "Failed to build bundle", so I went to track that down...

## In node_modules/xdl/build/logs/PackagerLogsStream.js
-     bundleError = new Error('Failed to build bundle');
+     bundleError = new Error('Failed to build bundle: ' + JSON.stringify(msg));
## This still didn't contain the error, but I could find where this message originated...

## In node_modules/metro-bundler/src/Server/index.js
## We can include the original error in the message object
      this._reporter.update({
        buildID,
-       type: 'bundle_build_failed' });
+       type: 'bundle_build_failed',
+       error: error });
## There are FOUR places where you can do this!

This got the error displayed on the console. But there must be an easier way... Running a build manually?

[jordan-realfoto]

Any movement on this? This is most certainly a high priority.

[csalvato]

This is making it ridiculously difficult to do any development. I have a syntax error somewhere in my code that I have been hunting for 3 hours.

Unfortunately, @joeytwiddle's hack doesn't help me much either..it just produces this:

2:47:22 PM: Failed building JavaScript bundle
2:47:22 PM: Error: Failed to build bundle: {"buildID":"1","type":"bundle_build_failed"}

[cjol]

This is really crazy - I have spent hours tracking down a solution. joeytwiddle's workaround _does_ work, but I found the code in slightly different locations. grep -R "Failed building JavaScript bundle" **/*.js in the node_modules located the right places for me. (it looks like csalvato hasn't made the third edit, which I made in 4 different places in the file, just to be sure).

[oacstevens]

If you're using expo one thing I've found that helps is to try building a standalone app by running exp build:ios (or exp build:android). It's not pretty due to a total lack of indentation, but I find the error message from there usually has enough information to fix the error.

[vbraun]

One option is to enable debug logging
~~
DEBUG='Metro:*' npm run start
~~
which will (among ridiculous amounts of noise) also output where the error is. Search for the line containing msg: '{"error":{"moduleName":"

[hpatel123]

Still issue doesn't resolved. Please help me. I am stuck since 3 days.

[Velua]

One option is to enable debug logging

DEBUG='Metro:*' npm run start

which will (among ridiculous amounts of noise) also output where the error is. Search for the line containing msg: '{"error":{"moduleName":"

Good one mate, this has saved me a whole lot of stress haha just to add onto that..

DEBUG='Metro:*' npm run start > log.txt

I found easier for traversing the 40,000 lines I received!

[hramos]

This issue hasn't been updated in a while. If anyone is still running into this, please go ahead and open a new, separate issue. This will help us debug the situation individually. When a thread gets to this size, it's hard to keep track when each problem is actually related to the original post.