Syntax error appears twice in console

[gaearon]

1. Create a new project
2. Make a syntax error

The terminal is fine but the console reports the same error twice:

[akshayjpatil]

First of all there are two errors generated, both different. One is caught as syntax error because there is no closing curly brackets and the second error is over the export of component since it is taking it as one of the line of code within the component. Hence the error.

That is not a bug. It is instead a feature of the create-react-app dev server which is a webpack dev server. Take a look at this file : webpackHotDevClient.js.

  // Only show the first error.
  ErrorOverlay.reportBuildError(formatted.errors[0]);

  // Also log them to the console.
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    for (var i = 0; i < formatted.errors.length; i++) {
      console.error(stripAnsi(formatted.errors[i]));
    }
  }

According to these lines. Only the first error will be shown in your computer's console. And all the errors will be logged as error in your browser console.

This can be re-written to something like this:

  // Only show the first error.
  ErrorOverlay.reportBuildError(formatted.errors[0]);

  // Also log them to the console.
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
      console.error(stripAnsi(formatted.errors[0]));
  }

But, it will log only the first error, if in case you have multiple errors triggering due to one simple syntax error. And many developers wouldn't like this.