Skip to content

format UglifyJs error #2650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 2, 2017
Merged

format UglifyJs error #2650

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3641c5c
format UglifyJs error
viankakrisna Jun 27, 2017
52bd133
move formatBuildError to react-dev-utils
viankakrisna Jun 27, 2017
0af70c2
fix readme
viankakrisna Jun 27, 2017
b53f903
use regex for plucking the path from stack
viankakrisna Jun 27, 2017
31fe07e
make path human readable and fallback to show error if regex not matched
viankakrisna Jun 29, 2017
212736d
rename to printBuildError and add link to the docs
viankakrisna Jul 12, 2017
a0d089b
fix link indentation
viankakrisna Jul 12, 2017
8f67581
improve readibility + shorten link
viankakrisna Jul 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion packages/react-scripts/scripts/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
);
Expand Down Expand Up @@ -141,3 +142,30 @@ function copyPublicFolder() {
filter: file => file !== paths.appHtml,
});
}

function formatError(err) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's say Failed to minify code from

chalk.yellow(
err.stack.split('\n')[1].split('[')[1].split('][')[0].replace(']', '')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 😢

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's say Failed to minify the code.

}
console.log(
'Please check your dependencies for any untranspiled es6 code and raise an issue with \n' +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

'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');
}
}