Create-react-app: Error when running eslint manually for default template project

[davidlukerice]

Describe the bug

With a new project using the default template created via

npx create-react-app test-project

running eslint manually via script like

"scripts": {
  ...
  "lint": "eslint './{src,test}/**/*.js'"
}

throws the following error

davidlukerice$ npm run lint

> [email protected] lint [...]]/test-app
> eslint './{src,test}/**/*.js'

Error: Failed to load parser '@typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
Require stack:
- [...]]/test-app/node_modules/@typescript-eslint/typescript-estree/dist/parser.js
- [...]]/test-app/node_modules/@typescript-eslint/parser/dist/parser.js
- [...]]/test-app/node_modules/eslint/lib/cli-engine/config-array-factory.js
- [...]]/test-app/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js
- [...]]/test-app/node_modules/eslint/lib/cli-engine/cli-engine.js
- [...]]/test-app/node_modules/eslint/lib/cli-engine/index.js
- [...]]/test-app/node_modules/eslint/lib/cli.js
- [...]]/test-app/node_modules/eslint/bin/eslint.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require ([...]]/test-app/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> ([...]]/test-app/node_modules/@typescript-eslint/typescript-estree/dist/parser.js:17:25)
    at Module._compile ([...]]/test-app/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] lint: `eslint './{src,test}/**/*.js'`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Environment

davidlukerice$ npx create-react-app --info

Environment:
OS: macOS 10.15.2
Node: 12.13.0
Yarn: 1.6.0
npm: 6.13.3
Watchman: 4.9.0
Xcode: Xcode 11.3 Build version 11C29
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.12.0 => 16.12.0
react-dom: ^16.12.0 => 16.12.0
react-scripts: 3.3.0 => 3.3.0

Steps to reproduce

1. Create a new application
2. Add in "lint": "eslint './{src,test}/**/*.js'" command to package.json
3. Run the command with npm run lint
4. See the error

Expected behavior

It should lint fine and not throw an error about a typescript module

Actual behavior

Throws an error.

[freewil]

I was able to run eslint by doing this:

npm install --save-dev eslint-config-react-app @typescript-eslint/[email protected] @typescript-eslint/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] as mentioned here: https://www.npmjs.com/package/eslint-config-react-app

in addition I needed to also:
npm install --save-dev typescript

and then
eslint . works

I suggest the default project template including a npm run lint command (maybe make it pretest script as well).

[davidlukerice]

I wouldn't think I'd need to install typescript for a non typescript app.

[davidlukerice]

Interestingly, if I split them into separate tasks like

    "lint:js": "eslint './src/**/*.js'",
    "lint:js-test": "eslint './test/**/*.js'",
    "lint": "npm run lint:js && npm run lint:js-test",

running npm lint works fine. Not sure why eslint would behave so differently based on the the file selector format.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.