From 3641c5c639f8f7ea06b610e3e017c14434e0a4b7 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Wed, 28 Jun 2017 05:33:11 +0700 Subject: [PATCH 1/8] format UglifyJs error --- packages/react-scripts/scripts/build.js | 30 ++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 2e4bc21ee5b..c5d8620709d 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -34,6 +34,7 @@ const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); +const get = require('lodash/get'); const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; @@ -93,7 +94,7 @@ measureFileSizesBeforeBuild(paths.appBuild) }, err => { console.log(chalk.red('Failed to compile.\n')); - console.log((err.message || err) + '\n'); + formatError(err); process.exit(1); } ); @@ -141,3 +142,30 @@ function copyPublicFolder() { filter: file => file !== paths.appHtml, }); } + +function formatError(err) { + const message = get(err, 'message'); + + // Add more helpful message for UglifyJs error + if (typeof message === 'string' && message.indexOf('from UglifyJs') !== -1) { + try { + console.log( + 'UglifyJs could not parse the code from \n\n', + chalk.yellow( + err.stack.split('\n')[1].split('[')[1].split('][')[0].replace(']', '') + ), + '\n' + ); + } catch (e) { + 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' + + '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.' + ); + } else { + console.log((message || err) + '\n'); + } +} From 52bd133b7cb58d011efc1457c8fbcd3d711150e7 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Wed, 28 Jun 2017 06:07:17 +0700 Subject: [PATCH 2/8] move formatBuildError to react-dev-utils --- packages/react-dev-utils/README.md | 12 +++++- packages/react-dev-utils/formatBuildError.js | 40 ++++++++++++++++++++ packages/react-dev-utils/package.json | 3 +- packages/react-scripts/scripts/build.js | 31 +-------------- 4 files changed, 55 insertions(+), 31 deletions(-) create mode 100644 packages/react-dev-utils/formatBuildError.js diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 166e1bfaea3..c35252e03f3 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -187,7 +187,7 @@ measureFileSizesBeforeBuild(buildFolder).then(previousFileSizes => { }); ``` -#### `formatWebpackMessages({errors: Array, warnings: Array}): {errors: Array, warnings: Array}` +#### `formatwebpackmessages({errors: Array, warnings: Array}): {errors: Array, warnings: Array}` Extracts and prettifies warning and error messages from webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object. @@ -220,6 +220,16 @@ compiler.plugin('done', function(stats) { }); ``` +#### `formatBuildError(error: Object): String` + +Prettify some known build errors. +Pass an Error object to log a prettified error message in the console + +``` + +``` + + #### `getProcessForPort(port: number): string` Finds the currently running process on `port`. diff --git a/packages/react-dev-utils/formatBuildError.js b/packages/react-dev-utils/formatBuildError.js new file mode 100644 index 00000000000..d50b0ab74dc --- /dev/null +++ b/packages/react-dev-utils/formatBuildError.js @@ -0,0 +1,40 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +const get = require('lodash/get'); +const chalk = require('chalk'); + +module.exports = function formatBuildError(err) { + const message = get(err, 'message'); + + // Add more helpful message for UglifyJs error + if (typeof message === 'string' && message.indexOf('from UglifyJs') !== -1) { + try { + console.log( + 'Failed to minify the code from \n\n', + chalk.yellow( + err.stack.split('\n')[1].split('[')[1].split('][')[0].replace(']', '') + ), + '\n' + ); + } catch (e) { + console.log('Failed to minify the code.', err); + } + console.log( + '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.' + ); + } else { + console.log((message || err) + '\n'); + } +}; diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 6fa6c4117a3..4a3c42874a0 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -18,13 +18,14 @@ "crossSpawn.js", "eslintFormatter.js", "FileSizeReporter.js", + "formatBuildError.js", "formatWebpackMessages.js", "getProcessForPort.js", "inquirer.js", "InterpolateHtmlPlugin.js", "launchEditor.js", - "noopServiceWorkerMiddleware.js", "ModuleScopePlugin.js", + "noopServiceWorkerMiddleware.js", "openBrowser.js", "openChrome.applescript", "printHostingInstructions.js", diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index c5d8620709d..70940aaeb66 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -34,7 +34,7 @@ const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); -const get = require('lodash/get'); +const formatBuildError = require('react-dev-utils/formatBuildError'); const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; @@ -94,7 +94,7 @@ measureFileSizesBeforeBuild(paths.appBuild) }, err => { console.log(chalk.red('Failed to compile.\n')); - formatError(err); + formatBuildError(err); process.exit(1); } ); @@ -142,30 +142,3 @@ function copyPublicFolder() { filter: file => file !== paths.appHtml, }); } - -function formatError(err) { - const message = get(err, 'message'); - - // Add more helpful message for UglifyJs error - if (typeof message === 'string' && message.indexOf('from UglifyJs') !== -1) { - try { - console.log( - 'UglifyJs could not parse the code from \n\n', - chalk.yellow( - err.stack.split('\n')[1].split('[')[1].split('][')[0].replace(']', '') - ), - '\n' - ); - } catch (e) { - 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' + - '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.' - ); - } else { - console.log((message || err) + '\n'); - } -} From 0af70c26223cc65344fb69edab9fbf0e60085409 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Wed, 28 Jun 2017 06:12:58 +0700 Subject: [PATCH 3/8] fix readme --- packages/react-dev-utils/README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index c35252e03f3..8921495936f 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -187,7 +187,7 @@ measureFileSizesBeforeBuild(buildFolder).then(previousFileSizes => { }); ``` -#### `formatwebpackmessages({errors: Array, warnings: Array}): {errors: Array, warnings: Array}` +#### `formatWebpackMessages({errors: Array, warnings: Array}): {errors: Array, warnings: Array}` Extracts and prettifies warning and error messages from webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object. @@ -226,10 +226,14 @@ Prettify some known build errors. Pass an Error object to log a prettified error message in the console ``` - + const formatBuildError = require('react-dev-utils/formatBuildError') + try { + build() + } catch(e){ + formatBuildError(e) // logs prettified message + } ``` - #### `getProcessForPort(port: number): string` Finds the currently running process on `port`. From b53f90392a4a04b4c4c555900382d7f950f321b2 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Wed, 28 Jun 2017 06:27:39 +0700 Subject: [PATCH 4/8] use regex for plucking the path from stack --- packages/react-dev-utils/formatBuildError.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/formatBuildError.js b/packages/react-dev-utils/formatBuildError.js index d50b0ab74dc..662e1a7b86d 100644 --- a/packages/react-dev-utils/formatBuildError.js +++ b/packages/react-dev-utils/formatBuildError.js @@ -21,7 +21,7 @@ module.exports = function formatBuildError(err) { console.log( 'Failed to minify the code from \n\n', chalk.yellow( - err.stack.split('\n')[1].split('[')[1].split('][')[0].replace(']', '') + /Unexpected token:(.+)\[(.+)\]\[(.+)\]/.exec(err.stack)[2] ), '\n' ); From 31fe07e53252b04f77914f3c33029085ee762d68 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 29 Jun 2017 22:33:12 +0700 Subject: [PATCH 5/8] make path human readable and fallback to show error if regex not matched --- packages/react-dev-utils/formatBuildError.js | 26 +++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/react-dev-utils/formatBuildError.js b/packages/react-dev-utils/formatBuildError.js index 662e1a7b86d..e880b8cdabb 100644 --- a/packages/react-dev-utils/formatBuildError.js +++ b/packages/react-dev-utils/formatBuildError.js @@ -14,18 +14,32 @@ const chalk = require('chalk'); module.exports = function formatBuildError(err) { const message = get(err, 'message'); + const stack = get(err, 'stack'); // Add more helpful message for UglifyJs error - if (typeof message === 'string' && message.indexOf('from UglifyJs') !== -1) { + if ( + stack && + typeof message === 'string' && + message.indexOf('from UglifyJs') !== -1 + ) { try { + const matched = /Unexpected token:(.+)\[(.+)\:(.+)\,(.+)\]\[.+\]/.exec( + stack + ); + if (!matched) { + throw new Error( + "The regex pattern is not matched. Maybe UglifyJs changed it's message?" + ); + } + const problemPath = matched[2]; + const line = matched[3]; + const column = matched[4]; console.log( - 'Failed to minify the code from \n\n', - chalk.yellow( - /Unexpected token:(.+)\[(.+)\]\[(.+)\]/.exec(err.stack)[2] - ), + 'Failed to minify the code from this file: \n\n', + chalk.yellow(`${problemPath} line ${line}:${column}`), '\n' ); - } catch (e) { + } catch (ignored) { console.log('Failed to minify the code.', err); } console.log( From 212736defa9d708026d7ec40bcc8076a8f48f41e Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 13 Jul 2017 04:26:28 +0700 Subject: [PATCH 6/8] rename to printBuildError and add link to the docs --- packages/react-dev-utils/README.md | 8 ++++---- packages/react-dev-utils/package.json | 2 +- .../{formatBuildError.js => printBuildError.js} | 8 +++----- packages/react-scripts/scripts/build.js | 7 ++++--- packages/react-scripts/template/README.md | 11 +++++++++++ 5 files changed, 23 insertions(+), 13 deletions(-) rename packages/react-dev-utils/{formatBuildError.js => printBuildError.js} (80%) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 8921495936f..bb4bde04134 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -220,17 +220,17 @@ compiler.plugin('done', function(stats) { }); ``` -#### `formatBuildError(error: Object): String` +#### `printBuildError(error: Object): String` Prettify some known build errors. Pass an Error object to log a prettified error message in the console ``` - const formatBuildError = require('react-dev-utils/formatBuildError') + const printBuildError = require('react-dev-utils/printBuildError') try { build() - } catch(e){ - formatBuildError(e) // logs prettified message + } catch(e) { + printBuildError(e) // logs prettified message } ``` diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 4a3c42874a0..7054912d759 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -18,7 +18,7 @@ "crossSpawn.js", "eslintFormatter.js", "FileSizeReporter.js", - "formatBuildError.js", + "printBuildError.js", "formatWebpackMessages.js", "getProcessForPort.js", "inquirer.js", diff --git a/packages/react-dev-utils/formatBuildError.js b/packages/react-dev-utils/printBuildError.js similarity index 80% rename from packages/react-dev-utils/formatBuildError.js rename to packages/react-dev-utils/printBuildError.js index e880b8cdabb..fbab06ff01f 100644 --- a/packages/react-dev-utils/formatBuildError.js +++ b/packages/react-dev-utils/printBuildError.js @@ -12,7 +12,7 @@ const get = require('lodash/get'); const chalk = require('chalk'); -module.exports = function formatBuildError(err) { +module.exports = function printBuildError(err) { const message = get(err, 'message'); const stack = get(err, 'stack'); @@ -43,10 +43,8 @@ module.exports = function formatBuildError(err) { console.log('Failed to minify the code.', err); } console.log( - '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.' + 'Read more here: \n', + 'https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify' ); } else { console.log((message || err) + '\n'); diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 70940aaeb66..232edf3ed80 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -34,9 +34,10 @@ const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); -const formatBuildError = require('react-dev-utils/formatBuildError'); +const printBuildError = require('react-dev-utils/printBuildError'); -const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; +const measureFileSizesBeforeBuild = + FileSizeReporter.measureFileSizesBeforeBuild; const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; const useYarn = fs.existsSync(paths.yarnLockFile); @@ -94,7 +95,7 @@ measureFileSizesBeforeBuild(paths.appBuild) }, err => { console.log(chalk.red('Failed to compile.\n')); - formatBuildError(err); + printBuildError(err); process.exit(1); } ); diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c54858b03f1..dd30ec3f5f1 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -87,6 +87,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra) - [`npm run build` exits too early](#npm-run-build-exits-too-early) - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku) + - [`npm run build` fails to minify](#npm-run-build-fails-to-minify) - [Moment.js locales are missing](#momentjs-locales-are-missing) - [Something Missing?](#something-missing) @@ -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. +Because running Babel on `node_modules` is slow, we cannot compile it to es5 +before minifying it. Possible solutions are: +1. Raise an issue with the library author to ship compiled es5. +2. If it's small and compatible with out babel preset, you can place the +source in ./src. +3. Fork the project repo and publish an es5 version of it. + ## Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md) From a0d089b814b92de4cae4bbf72919ae17bb5ed00f Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Thu, 13 Jul 2017 04:31:05 +0700 Subject: [PATCH 7/8] fix link indentation --- packages/react-dev-utils/printBuildError.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-dev-utils/printBuildError.js b/packages/react-dev-utils/printBuildError.js index fbab06ff01f..af3fbc8b210 100644 --- a/packages/react-dev-utils/printBuildError.js +++ b/packages/react-dev-utils/printBuildError.js @@ -42,9 +42,9 @@ module.exports = function printBuildError(err) { } catch (ignored) { console.log('Failed to minify the code.', err); } + console.log('Read more here:'); console.log( - 'Read more here: \n', - 'https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify' + 'https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify\n' ); } else { console.log((message || err) + '\n'); From 8f67581d4d14503335c7b36a592dfdfa7b66b8bc Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Fri, 14 Jul 2017 07:40:40 +0700 Subject: [PATCH 8/8] improve readibility + shorten link --- packages/react-dev-utils/README.md | 4 ++-- packages/react-dev-utils/printBuildError.js | 6 ++---- packages/react-scripts/template/README.md | 14 +++++++------- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index bb4bde04134..eb8f48b68c9 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -220,10 +220,10 @@ compiler.plugin('done', function(stats) { }); ``` -#### `printBuildError(error: Object): String` +#### `printBuildError(error: Object): void` Prettify some known build errors. -Pass an Error object to log a prettified error message in the console +Pass an Error object to log a prettified error message in the console. ``` const printBuildError = require('react-dev-utils/printBuildError') diff --git a/packages/react-dev-utils/printBuildError.js b/packages/react-dev-utils/printBuildError.js index af3fbc8b210..5efbaa97d43 100644 --- a/packages/react-dev-utils/printBuildError.js +++ b/packages/react-dev-utils/printBuildError.js @@ -42,11 +42,9 @@ module.exports = function printBuildError(err) { } catch (ignored) { console.log('Failed to minify the code.', err); } - 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' - ); + console.log('Read more here: http://bit.ly/2tRViJ9'); } else { console.log((message || err) + '\n'); } + console.log(); }; diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index dd30ec3f5f1..1e9a50572da 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2001,13 +2001,13 @@ 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. -Because running Babel on `node_modules` is slow, we cannot compile it to es5 -before minifying it. Possible solutions are: -1. Raise an issue with the library author to ship compiled es5. -2. If it's small and compatible with out babel preset, you can place the -source in ./src. -3. Fork the project repo and publish an es5 version of it. +You may occasionally find a package you depend on needs compiled or ships code for a non-browser environment.
+This is considered poor practice in the ecosystem and does not have an escape hatch in Create React App.
+
+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. ## Something Missing?