Skip to content
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.

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

format UglifyJs error #2650

Merged
merged 8 commits into from Aug 2, 2017

Conversation

Projects
None yet
5 participants
@viankakrisna
Copy link
Contributor

commented Jun 27, 2017

Fixing #2641
ezgif-2-911bc0b6e5

@gaearon

This comment has been minimized.

Copy link
Member

commented Jun 27, 2017

😮

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

function formatError(err) {

This comment has been minimized.

Copy link
@gaearon

gaearon Jun 27, 2017

Member

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

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

This comment has been minimized.

Copy link
@gaearon

gaearon Jun 27, 2017

Member

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.

This comment has been minimized.

Copy link
@viankakrisna

viankakrisna Jun 27, 2017

Author Contributor

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 😢

This comment has been minimized.

Copy link
@gaearon

gaearon Jun 27, 2017

Member

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.

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

This comment has been minimized.

Copy link
@gaearon

gaearon Jun 27, 2017

Member

Let's say Failed to minify code from

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

This comment has been minimized.

Copy link
@gaearon

gaearon Jun 27, 2017

Member

Let's say Failed to minify the code.

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' +

This comment has been minimized.

Copy link
@gaearon

gaearon Jun 27, 2017

Member

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

@@ -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>}`

This comment has been minimized.

Copy link
@gaearon

This comment has been minimized.

Copy link
@viankakrisna

viankakrisna Jun 27, 2017

Author Contributor

whoops

viankakrisna added some commits Jun 27, 2017

const get = require('lodash/get');
const chalk = require('chalk');

module.exports = function formatBuildError(err) {

This comment has been minimized.

Copy link
@Timer

Timer Jun 29, 2017

Collaborator

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

This comment has been minimized.

Copy link
@viankakrisna

viankakrisna Jun 29, 2017

Author Contributor

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

This comment has been minimized.

Copy link
@Timer

Timer Jul 12, 2017

Collaborator

How about printBuildError?

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

This comment has been minimized.

Copy link
@Timer

Timer Jun 29, 2017

Collaborator

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

This comment has been minimized.

Copy link
@Timer

Timer Jun 29, 2017

Collaborator

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

This comment has been minimized.

Copy link
@viankakrisna

viankakrisna Jun 29, 2017

Author Contributor

like this? screen shot 2017-06-29 at 10 24 52 pm

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

This comment has been minimized.

Copy link
@Timer

Timer Jun 29, 2017

Collaborator

How about a colon?

@viankakrisna

This comment has been minimized.

Copy link
Contributor Author

commented Jul 2, 2017

ready for more review!

@viankakrisna

This comment has been minimized.

Copy link
Contributor Author

commented Jul 12, 2017

image

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

This comment has been minimized.

Copy link
@Timer

Timer Jul 12, 2017

Collaborator

nit: add missing space

const get = require('lodash/get');
const chalk = require('chalk');

module.exports = function formatBuildError(err) {

This comment has been minimized.

Copy link
@Timer

Timer Jul 12, 2017

Collaborator

How about printBuildError?

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

This comment has been minimized.

Copy link
@Timer

Timer Jul 12, 2017

Collaborator

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?

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

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

This comment has been minimized.

Copy link
@Timer

Timer Jul 13, 2017

Collaborator

I assume this should return void.

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

Prettify some known build errors.
Pass an Error object to log a prettified error message in the console

This comment has been minimized.

Copy link
@Timer

Timer Jul 13, 2017

Collaborator

nit: missing period at end

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

This comment has been minimized.

Copy link
@Timer

Timer Jul 13, 2017

Collaborator

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.
}
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'

This comment has been minimized.

Copy link
@Timer

Timer Jul 13, 2017

Collaborator

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

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Aug 2, 2017

LGTM, I trust you that this works.

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

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@Timer

This comment has been minimized.

Copy link
Collaborator

commented Aug 9, 2017

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

JohnNilsson referenced this pull request in JohnNilsson/create-react-app-typescript Aug 9, 2017

Format UglifyJs error (#2650)
* 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

someden pushed a commit to someden/create-react-app that referenced this pull request Aug 9, 2017

Format UglifyJs error (facebook#2650)
* 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

This comment has been minimized.

Copy link

commented Aug 10, 2017

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

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Aug 10, 2017

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

Can you submit a PR adding the dependency please?

zangrafx added a commit to absolvent/create-react-app that referenced this pull request Aug 13, 2017

Merge commit 'bfaee410c502a95076a6bd89721c76ca08e15f7b'
* 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

JohnNilsson referenced this pull request in JohnNilsson/create-react-app-typescript Sep 9, 2017

Format UglifyJs error (#2650)
* 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

Ayc0 pushed a commit to Ayc0/create-react-app that referenced this pull request Sep 18, 2017

Format UglifyJs error (facebook#2650)
* 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

kasperpeulen added a commit to kasperpeulen/create-react-app that referenced this pull request Sep 24, 2017

Format UglifyJs error (facebook#2650)
* 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

swengorschewski referenced this pull request in swengorschewski/cra-typescript-electron Oct 16, 2017

Format UglifyJs error (#2650)
* 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

jdcrensh added a commit to jdcrensh/create-react-app that referenced this pull request Oct 24, 2017

Format UglifyJs error (facebook#2650)
* 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

@viankakrisna viankakrisna deleted the viankakrisna:formatUglifyJsError branch Dec 17, 2017

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.