Provide stacktrace for react-scripts/build.js `build` function

[Dergash]

Is your proposal related to a problem?

I've encountered a problem that I think could've been diagnosed more easily if build script were more verbose and provided a stack trace aside of error message.

My scenario was pretty simple - I've used CRA, eject, then played a bit with entry record:
https://github.com/facebook/create-react-app/blob/687c4ebf211ad30238f2d59e063b8171e015bfc7/packages/react-scripts/config/webpack.config.js#L151
by replacing an array configuration with an object configuration (which is valid webpack option)

After that I couldn't build my app (which is fine) and I coundn't easily find a problem, see attached image:

As you can see, the error message didn't tell me where the problem occured or what the context was, so if I've played a lot around my configuration then I have to either revert my changes line by line to find which exactly broke the build or debug build script itself.

Describe the solution you'd like

Error message was formed here:
https://github.com/facebook/create-react-app/blob/687c4ebf211ad30238f2d59e063b8171e015bfc7/packages/react-scripts/scripts/build.js#L196

If there would've been an additional stacktrace added to that array:

if (err) {
    messages.errors.push(err.stack);
}
return reject(new Error(messages.errors.join('\n\n'), ));

then I would have a more precise description of a problem that shows me that 'filter of undefined' situation occured exactly at 583 line of my webpack config which I should further work with:

Describe alternatives you've considered

There is an obvious concern that stacktraces might not have a place in defined policy of user-friendly error messages, but they probably could be enabled by additional --verbose flag.

[a-laughlin]

+1. Having a similar issue on start. Non-ejected. Using setupProxy.js and a src/server directory with apollo-server-express. Guessing that server/src is using es modules syntax, and that won't work with setupProxy.js, though there's no stack trace to confirm it.

create-react-app --version
3.4.1
node --version
v12.16.2

Solution is also similar:
Replacing console.log(err.message) with console.error(err). in start.js line 166 yields:

yarn start
yarn run v1.22.4
$ react-scripts start
.../src/server/domain_models_schema.js:3
export default gql`
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1070:16)
    at Module._compile (internal/modules/cjs/loader.js:1120:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (.../src/server/dev-server.js:2:18)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
error Command failed with exit code 1.

[surinderlohat]

@Dergash Thanks for posting this issue it saved my many hours :)

I was getting the same issue in prod build there is no clue what is wrong there because app was working fine with yarn start command.
your this code help me to solve that.

for more who is getting the same error in prod build and no clue wht's wrong there

then just do this thing

got file formatWebpackMessages.js under the node_modules\react-dev-utils\formatWebpackMessages.js

this console.log do the magic

with this console.log('formatWebpackMessages', json);

without this console.log('formatWebpackMessages', json); it was only showing

[engFelipeMonteiro]

• 1 for this implementation, this may have a flag to activate the traceback