When starting a new project, I typically use the following command:
npx create-react-app my-app --template typescript
After adding TypeScript type checking to my project, I encountered an error in my App.tsx file:
Parsing error: ESLint was configured to run on `<tsconfigRootDir>/../../../../my-app-ts/src/App.tsx` using `parserOptions.project`: <tsconfigRootDir>/tsconfig .json
However, that TSConfig does not include this file. To resolve this issue, you can:
- Modify ESLint's list of included files
- Update the TSConfig file to include this specific file
- Create a new TSConfig and include it in your parserOptions.project
For more information, refer to the TypeScript ESLint docs: https://typescript-eslint.io/docs/linting/troubleshooting##i-get-errors-telling-me-eslint-was-configured-to-run--however-that -tsconfig-does-not--none-of-those-tsconfigs-include-this-fileeslint
The contents of my .eslintrc.js file are as follows:
module.exports = {
extends: [
"react-app",
"react-app/jest",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
],
parserOptions: {
tsconfigRootDir: __dirname,
project: "./tsconfig.json",
},
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
root: true,
};
This is the content of my tsconfig.json file:
{
"baseUrl": ".",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src/**/*.tsx",
"src/**/*.ts"
]
}
My directory structure looks like this:
/mnt/data0/work/my-app-ts
├── README.md
├── package.json
├── public
| ├── favicon.ico
| ├── index.html
| ├── logo192.png
| ├── logo512.png
| ├── manifest.json
| └── robots.txt
├── src
| ├── App.css
| ├── App.test.tsx
| ├── App.tsx
| ├── index.css
| ├── index.tsx
| ├── logo.svg
| ├── react-app-env.d.ts
| ├── reportWebVitals.ts
| └── setupTests.ts
├── tsconfig.json
└── yarn.lock
Although src/App.tsx is included in the scope, I am still facing issues. If you have any suggestions or solutions, please feel free to reply. Any help would be highly appreciated.