Create-react-app: Failed to compile. Missing semicolon semi.

[georgesco94]

Hello,
Working on a project bootstrapped with create-react-app. After I cloned it, I ran npm install and then when I run npm start I get:
Failed to compile
Line 1: Missing semicolon semi
.
.
.
There are a bunch of those in most files on the project. For a split second before this error appears I see the UI of the site, and then the error appears. Has anyone encountered that issue or have an idea where it's coming from? Thanks for the help.

Environment:
OS: macOS Sierra 10.12.6
Node: 8.9.4
Yarn: 1.3.2
npm: 6.1.0
Watchman: Not Found
Xcode: Not Found
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.3.2 => 16.4.1
react-dom: ^16.3.2 => 16.4.1

[Clafouti]

Hi,

It could be an error tied to a linter (ESLint maybe?). Do you have a linter in your environment that somehow could explain the error?

[georgesco94]

I don't believe so. Do you mean if I have a globally installed linter (say ESLint) ? I checked and I don't.

[Clafouti]

I'd double check the existence of a .eslintrc file in your project or a eslintConfig key in your package.json.

[georgesco94]

Thanks a lot! There was no .eslintrc file, neither eslintConfig key in package.json. So i added a .eslintrc file at the root level with the following content (I simply saw this from the REACT_README)

{
  "extends": "react-app"
}

Any ideas why that fixed the compilation error, i'm not sure I understand what's going on?

[Clafouti]

Sorry but I'm not sure either. I actually don't use a linter, only prettier :/

[RusinovAnton]

@georgesco94 create-react-app has this feature that blocks UI of the app whenever you have eslint errors (or other). Since you had no eslint configuration you’ve got default lint error on semicolons and once you’ve extended react-app’s config they disappeared because react-apps config disables lint rule about semi. The error screen will appear again once your code will have lint errors that are enabled in configuration.

EDIT: this feature is called "error overlay"

[Timer]

Seems this was figured out. There was most likely some sort of global eslint config.