CODEWITHSUNDEEP
reactjscreate-react-appeslint
Tuz
Tuz

Reputation: 1980

create react app - without typescript , got Error: Failed to load parser '@typescript-eslint/parser'

I have sample installation of react-app and I got the following

Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'

after running

 npm run lint -> eslint .

I don't use typescript in this project. I tried to install it from scratch and got it again. also tried to remove tslint from vscode plugin

Upvotes: 20

Views: 29618

Answers (8)

PatS
PatS

Reputation: 11454

In my case, I wanted typescript, but didn't get it installed. This question still helped me figure out my problem which is described below.

I was watching a YouTube video, React Typescript Tutorial that explained how to get started with typescript and react, and the video said to run:

npx create-react-app cra-ts --typescript

This didn't work (but I didn't know it). As soon as I created a hello.ts file, I got the error the OP describes.

Error: Failed to load parser '@typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'

The fix was to use the command:

npx create-react-app myappts --template typescript

This used [email protected] and [email protected].

ProTip: If your newly created React App doesn't have a file named App.tsx, then you haven't actually created it correctly.

Upvotes: 0

Chukwudi Nweze
Chukwudi Nweze

Reputation: 151

In my case, I deleted the yarn lock as well as the yarn error log file that was created when I ran yarn.dev by mistake instead of npm start

Upvotes: 0

Mister 3D
Mister 3D

Reputation: 81

I had the same issue when trying to create a new react app today.

You can try the following steps:

  1. Make sure you update your nodejs to the latest version
  2. Make sure your folder path is short and does not contain spaces
  3. Run: npm install -g create-react-app
  4. Run: npm i --save-dev typescript @typescript-eslint/parser
  5. Run: create-react-app my-app

Upvotes: 8

Dmytro
Dmytro

Reputation: 5701

Create React App adds eslint config to package.json, so you just have to add eslintIgnore with node_modules in package.json. A cleaner alternative to creating a separate file .eslintignore

  // package.json
  // ...
  "eslintConfig": {
    "extends": "react-app"
  },
  "eslintIgnore": [
    "node_modules",
    "build/*"
  ],

Upvotes: 5

Tuz
Tuz

Reputation: 1980

You can add this to your .eslintignore file in the root of your project.

node_modules

create-react-app team will release a new version with that fix also

https://github.com/facebook/create-react-app/pull/8376

Upvotes: 28

Vanuan
Vanuan

Reputation: 33422

Most likely, you have this in your .eslintrc:

extends: react-app

It means the following rule is applied:

files: ['**/*.ts?(x)'], 
parser: '@typescript-eslint/parser',

Which probably means you have *.ts/*.tsx files in your root folder. But maybe it's the vscode-eslint. Did you try to run yarn lint from the terminal?

Upvotes: 1

francoiscabrol
francoiscabrol

Reputation: 71

I was removing typescript from a project and I got the same error because I had forgotten a typescript definition somewhere under the src folder... deleting the file fixed the issue.

Upvotes: 0

Sydney Y
Sydney Y

Reputation: 3152

Your error message says eslint is looking for typescript because of a setting in the file .eslintrc so try looking in that file for @typescript-eslint/parser and remove it.

Upvotes: 0

Related Questions