format UglifyJs error #2650

viankakrisna · 2017-06-27T22:44:07Z

gaearon · 2017-06-27T22:51:02Z

😮

gaearon · 2017-06-27T22:51:46Z

packages/react-scripts/scripts/build.js

@@ -141,3 +142,30 @@ function copyPublicFolder() {
    filter: file => file !== paths.appHtml,
  });
 }
+
+function formatError(err) {


Let's move this to react-dev-utils. Something like formatBuildError.

gaearon · 2017-06-27T22:52:37Z

packages/react-scripts/scripts/build.js

+      console.log(
+        'UglifyJs could not parse the code from \n\n',
+        chalk.yellow(
+          err.stack.split('\n')[1].split('[')[1].split('][')[0].replace(']', '')


I would prefer if we checked against a regex (and extracted from it) instead.
So that if it doesn't match, we don't attempt to parse.

my regex is not very good, the string from err.stack.split('\n')[1] looks like this

Unexpected token: name (A) [./packages/react-scripts/~/asdf/index.js:1,0][static/js/main.6078c716.js:9605,6]

Haven't developed the muscle memory for regexing that 😢

You can use https://regex101.com/ for testing regexes.

I don't mind split/joining too much either, but then we need to test that it matches the format first somehow. Before we attempt to parse. So that we don't end up with garbage.

gaearon · 2017-06-27T22:52:54Z

packages/react-scripts/scripts/build.js

+  if (typeof message === 'string' && message.indexOf('from UglifyJs') !== -1) {
+    try {
+      console.log(
+        'UglifyJs could not parse the code from \n\n',


Let's say Failed to minify code from

gaearon · 2017-06-27T22:53:18Z

packages/react-scripts/scripts/build.js

+        '\n'
+      );
+    } catch (e) {
+      console.log('UglifyJs could not process the code.', err);


Let's say Failed to minify the code.

gaearon · 2017-06-27T22:55:13Z

packages/react-scripts/scripts/build.js

+      console.log('UglifyJs could not process the code.', err);
+    }
+    console.log(
+      'Please check your dependencies for any untranspiled es6 code and raise an issue with \n' +


I'll want to tweak this message but let's fix other issues first.

gaearon · 2017-06-27T23:08:45Z

packages/react-dev-utils/README.md

@@ -187,7 +187,7 @@ measureFileSizesBeforeBuild(buildFolder).then(previousFileSizes => {
 });
 ```

-#### `formatWebpackMessages({errors: Array<string>, warnings: Array<string>}): {errors: Array<string>, warnings: Array<string>}`
+#### `formatwebpackmessages({errors: Array<string>, warnings: Array<string>}): {errors: Array<string>, warnings: Array<string>}`


Timer · 2017-06-29T04:15:49Z

packages/react-dev-utils/formatBuildError.js

+const get = require('lodash/get');
+const chalk = require('chalk');
+
+module.exports = function formatBuildError(err) {


I'm really not fond of this name since it does more than just formatting the error message.

any suggestion? haven't got anything better pops up...

How about printBuildError?

Timer · 2017-06-29T04:17:22Z

packages/react-dev-utils/formatBuildError.js

+      console.log(
+        'Failed to minify the code from \n\n',
+        chalk.yellow(
+          /Unexpected token:(.+)\[(.+)\]\[(.+)\]/.exec(err.stack)[2]


This could not match or be undefined (in the future if the text format changes); we probably shouldn't assume it's always going to be OK (we don't want this method throwing an error).

Also, I don't think I really like how the line / col is shown -- can we make this more human readable?
./bla/bla.js, line 52:1

Timer · 2017-06-29T04:20:02Z

packages/react-dev-utils/formatBuildError.js

+  if (typeof message === 'string' && message.indexOf('from UglifyJs') !== -1) {
+    try {
+      console.log(
+        'Failed to minify the code from \n\n',


How about a colon?

viankakrisna · 2017-07-02T21:14:51Z

ready for more review!

viankakrisna · 2017-07-12T15:54:59Z

Timer · 2017-07-12T19:24:59Z

packages/react-dev-utils/README.md

+  const formatBuildError = require('react-dev-utils/formatBuildError')
+  try {
+    build()
+  } catch(e){


nit: add missing space

Timer · 2017-07-12T19:25:26Z

packages/react-dev-utils/formatBuildError.js

+const get = require('lodash/get');
+const chalk = require('chalk');
+
+module.exports = function formatBuildError(err) {


How about printBuildError?

Timer · 2017-07-12T19:26:32Z

packages/react-dev-utils/formatBuildError.js

+      'Please check your dependencies for any untranspiled es6 code and raise an issue with \n' +
+        'the author. \n' +
+        '\nIf you need to use the module right now, you can try placing the source in ./src \n' +
+        'and we will transpile it for you.'


I'm not a huge fan of this message. Can we add an entry for this into the User Guide and link to it instead?

Timer · 2017-07-13T23:39:57Z

packages/react-dev-utils/README.md

@@ -220,6 +220,20 @@ compiler.plugin('done', function(stats) {
 });
 ```

+#### `printBuildError(error: Object): String`


I assume this should return void.

Timer · 2017-07-13T23:40:13Z

packages/react-dev-utils/README.md

+#### `printBuildError(error: Object): String`
+
+Prettify some known build errors.
+Pass an Error object to log a prettified error message in the console


nit: missing period at end

Timer · 2017-07-13T23:47:20Z

packages/react-scripts/template/README.md

@@ -1998,6 +1999,16 @@ moment.locale('fr');

 This will only work for locales that have been explicitly imported before.

+### `npm run build` fails to minify
+
+Some dependencies may be shipping their source which our minify can't process.


Let's simplify this for now:

You may occasionally find a package you depend on needs compiled or ships code for a non-browser environment.<br> This is considered poor practice in the ecosystem and does not have an escape hatch in Create React App.<br> <br> To resolve this: 1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled (retaining ES6 Modules). 2. Fork the package and publish a corrected version yourself. 3. If the dependency is small enough, copy it to your `src/` folder and treat it as application code.

Timer · 2017-07-13T23:49:02Z

packages/react-dev-utils/printBuildError.js

+    }
+    console.log('Read more here:');
+    console.log(
+      'https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify\n'


Let's shorten this: http://bit.ly/2tRViJ9

Timer · 2017-08-02T01:57:40Z

LGTM, I trust you that this works.

Timer · 2017-08-09T03:50:09Z

Hi there! This change is out in react-scripts@1.0.11; please give it a go! Thanks.

* format UglifyJs error * move formatBuildError to react-dev-utils * fix readme * use regex for plucking the path from stack * make path human readable and fallback to show error if regex not matched * rename to printBuildError and add link to the docs * fix link indentation * improve readibility + shorten link

ramkumarvs · 2017-08-10T21:09:01Z

did you forget to add lodash in the package.json?

Timer · 2017-08-10T21:10:33Z

Ah, it appears so! Interesting that the CI passed; is this causing you an issue?

Can you submit a PR adding the dependency please?

* commit 'bfaee410c502a95076a6bd89721c76ca08e15f7b': (39 commits) Publish Prepare for 1.0.11 release (facebook#2924) Update dev deps (facebook#2923) Update README.md Use env variable to disable source maps (facebook#2818) Make formatWebpackMessages return all messages (facebook#2834) Adjust the `checkIfOnline` check if in a corporate proxy environment (facebook#2884) Fix the order of arguments in spawned child proc (facebook#2913) Feature/webpack 3 4 (facebook#2875) Allow importing package.json (facebook#2468) Re-enable flowtype warning (facebook#2718) Format UglifyJs error (facebook#2650) Unstage yarn.lock pre-commit (facebook#2700) Update README.md Update README.md Add Electrode to alternatives (facebook#2728) Fix parsing HTML/JSX tags to real elements (facebook#2796) Update webpack version note (facebook#2798) Use modern syntax feature (facebook#2873) Allow use of scoped packages with a pinned version (facebook#2853) ... # Conflicts: # packages/react-scripts/config/webpack.config.dev.js # packages/react-scripts/config/webpack.config.prod.js # packages/react-scripts/package.json

* format UglifyJs error * move formatBuildError to react-dev-utils * fix readme * use regex for plucking the path from stack * make path human readable and fallback to show error if regex not matched * rename to printBuildError and add link to the docs * fix link indentation * improve readibility + shorten link

format UglifyJs error

3641c5c

facebook-github-bot added the CLA Signed label Jun 27, 2017

gaearon reviewed Jun 27, 2017

View reviewed changes

gaearon suggested changes Jun 27, 2017

View reviewed changes

gaearon added the tag: enhancement label Jun 27, 2017

gaearon added this to the 1.0.x milestone Jun 27, 2017

gaearon mentioned this pull request Jun 27, 2017

Provide readable error messages on top of Uglify #2641

Closed

move formatBuildError to react-dev-utils

52bd133

gaearon reviewed Jun 27, 2017

View reviewed changes

viankakrisna added 2 commits June 28, 2017 06:12

fix readme

0af70c2

use regex for plucking the path from stack

b53f903

Timer reviewed Jun 29, 2017

View reviewed changes

make path human readable and fallback to show error if regex not matched

31fe07e

Timer reviewed Jul 12, 2017

View reviewed changes

viankakrisna added 2 commits July 13, 2017 04:26

rename to printBuildError and add link to the docs

212736d

fix link indentation

a0d089b

Timer suggested changes Jul 13, 2017

View reviewed changes

improve readibility + shorten link

8f67581

tatemz mentioned this pull request Aug 1, 2017

Packaging and module loading questions orbitjs/orbit#117

Closed

Timer merged commit b643f57 into facebook:master Aug 2, 2017

svicalifornia mentioned this pull request Aug 10, 2017

Build errors are not printed to console due to broken require #2936

Closed

viankakrisna deleted the formatUglifyJsError branch December 17, 2017 18:20

viankakrisna mentioned this pull request Dec 17, 2017

use uglifyjs-webpack-plugin v1 #3618

Merged

viankakrisna mentioned this pull request Jan 11, 2018

set webpack-uglify-plugin ecma support based on browserlist #3748

Closed

lock bot locked and limited conversation to collaborators Jan 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

format UglifyJs error #2650

format UglifyJs error #2650

viankakrisna commented Jun 27, 2017

gaearon commented Jun 27, 2017

gaearon Jun 27, 2017

gaearon Jun 27, 2017

viankakrisna Jun 27, 2017

gaearon Jun 27, 2017

gaearon Jun 27, 2017

gaearon Jun 27, 2017

gaearon Jun 27, 2017

gaearon Jun 27, 2017

viankakrisna Jun 27, 2017

Timer Jun 29, 2017

viankakrisna Jun 29, 2017

Timer Jul 12, 2017

Timer Jun 29, 2017

Timer Jun 29, 2017

viankakrisna Jun 29, 2017

Timer Jun 29, 2017

viankakrisna commented Jul 2, 2017

viankakrisna commented Jul 12, 2017

Timer Jul 12, 2017

Timer Jul 12, 2017

Timer Jul 12, 2017

Timer Jul 13, 2017

Timer Jul 13, 2017

Timer Jul 13, 2017

Timer Jul 13, 2017

Timer commented Aug 2, 2017

Timer commented Aug 9, 2017

ramkumarvs commented Aug 10, 2017

Timer commented Aug 10, 2017

format UglifyJs error #2650

format UglifyJs error #2650

Conversation

viankakrisna commented Jun 27, 2017

gaearon commented Jun 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

viankakrisna commented Jul 2, 2017

viankakrisna commented Jul 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Timer commented Aug 2, 2017

Timer commented Aug 9, 2017

ramkumarvs commented Aug 10, 2017

Timer commented Aug 10, 2017