36

I am setting up a new project with Remix (remix.run) and I am trying to configure Cypress/ESLint for component testing. I have a TestComponent.cy.ts with some boilerplate code:

describe('TestComponent.cy.ts', () => {
  it('playground', () => {
    // cy.mount()
  })
})

However, the describe function throws this Error:

    Parsing error: ESLint was configured to run on `<tsconfigRootDir>/component/TestComponent.cy.ts` using `parserOptions.project`: <tsconfigRootDir>/../../../../../../users/tduke/desktop/dev/blog/cypress/tsconfig.json
    However, that TSConfig does not include this file. Either:
    - Change ESLint's list of included files to not include this file
    - Change that TSConfig to include this file
    - Create a new TSConfig that includes this file and include it in your parserOptions.project

I have tried to reconfigure my .tsconfig.json and .eslintrc.js to no avail. Currently, this is what those files look like:

tsconfig.json:

{
  "exclude": ["./cypress", "./cypress.config.ts"],
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "./cypress/component/*.cy.ts", "./cypress/**/*.cy.ts", 
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "types": ["vitest/globals"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "skipLibCheck": true,

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

.eslintrc.js:


/** @type {import('@types/eslint').Linter.BaseConfig} */
module.exports = {
  extends: [
    "@remix-run/eslint-config",
    "@remix-run/eslint-config/node",
    "@remix-run/eslint-config/jest-testing-library",
    "prettier",
  ],
  env: {
    "cypress/globals": true,
  },
  parserOptions: {
    project: './tsconfig.json'
  },
  plugins: ["cypress"],
  // We're using vitest which has a very similar API to jest
  // (so the linting plugins work nicely), but we have to
  // set the jest version explicitly.
  settings: {
    jest: {
      version: 28,
    },
  },
};
T. Duke
  • 646
  • 1
  • 6
  • 17

8 Answers8

33

I also encountered the same problem, I solved the problem by removing the project property under parserOptions

parserOptions: {
  ecmaFeatures: {
    jsx: true,
  },
  ecmaVersion: 12,
  sourceType: 'module',
  // project: 'tsconfig.json',
  tsconfigRootDir: __dirname,
},
Dhia Djobbi
  • 1,176
  • 2
  • 15
  • 35
max-tong
  • 379
  • 2
  • 3
  • 5
    Didn't work for me unfortunately. – T. Duke Nov 13 '22 at 15:03
  • Worked for me. I was deploying it on AWS Amplify and this was failing the build. – Master Feb 19 '23 at 10:54
  • 2
    Deleting it will make eslint recommended plugin not working. – ImBIOS Feb 28 '23 at 07:39
  • 19
    THIS IS A POTENTIALLY RECKLESS ACTION - DOING THIS WILL DISABLE ESLINT'S ABILITY TO USE RULES WITH TYPE INFORMATION. (See the [docs](https://typescript-eslint.io/architecture/parser/#project) for more information.) Roman Rokon's [answer](https://stackoverflow.com/a/75791515/5425359) is a less destructive solution. – Avi Nerenberg Apr 04 '23 at 18:10
  • In my case, the issue was with the file name, I had two files: `router.ts` and `Router.tsx` in the same directory. And in `tsconfig.json`, the `include` was set to `src/**/*`. I had to rename one of the file. :| – Hitesh Kumar Apr 30 '23 at 10:06
21

This is what I ended up putting in my .eslintrc.js:

module.exports = {
  // ...
  parserOptions: {
    parser: '@typescript-eslint/parser',
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
};

It may have been that the project needed to be ./tsconfig.json instead of tsconfig.json. My tsconfig file is in the project root.

And this brought up some more errors linting things like babel config so I created an .eslintignore file and added those in there:

.eslintrc.js
ios/
android/
*.config.js

This solved all my issues.

ImBIOS
  • 630
  • 1
  • 9
  • 24
Ian
  • 1,746
  • 1
  • 15
  • 28
  • 3
    This is probably going to be the solution in most cases. The error literally explains that ES Lint is running a TypeScript check on a set of files with help of your TypeScript configurations in TSConfig (tsconfig.json), but the TSConfig provided excludes those files. The natural solution is to also exclude these files from ES Lint, with help of .eslintignore. – JacobF Jan 30 '23 at 16:04
  • 1
    Fixed the problem for me (Vite + React + TS stack) – AdamKniec Feb 27 '23 at 19:32
  • This is the best answer. Don't forget tsconfigRootDir – Hinton May 19 '23 at 09:00
10

You should add ["./.eslintrc.js"] to your tsconfig.json file:

{
   "include": ["./.eslintrc.js"],
   //...
}
michal
  • 1,534
  • 5
  • 28
  • 62
  • 5
    But I don't want to make typescript process my `.eslintrc.js`, it's a development configuration file – Klesun Feb 08 '23 at 10:39
  • @Klesun, the error message also says you can remove it from your eslint file if that's the way you want to go. – Ian May 22 '23 at 18:52
8

According to your tsconfig include you have included the .cy.ts files from your /cypress folder. But the error is about the file in your root /component folder.

By the way you're also missing the root dir config. Try setting the root dir in .eslintrc.js:

parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },

Then include or exclude the cypress files (depending on your needs) in tsconfig.json:

...
"**/*.cy.ts"
...

Also you're not excluding the node_modules folder. I don't know whether it's intentional or not. But when you define exclude, it overrides the default, and you should exclude node_modules manually.

If your tsconfig doesn't include some files from the root directory (e.g. .eslintrc.js) you have to exclude them in .eslintrc.js itself:

   ignorePatterns: ['.eslintrc.js'],

This way you don't have to include development only files in your tsconfig.

It's the same as .eslintignore file Ian suggested above. But for those who don't like creating files with literally one line of content in them!

Hope it helps you or someone else in the future.

For more info:

https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

Roman Rokon
  • 81
  • 2
  • 4
0

This happened due you may be missing to include your .eslintrc.js file in tsconfig.json include list. You include that and error will be resolved

Ashish Chaudhary
  • 1
  • 1
0

So @Ian answer was half right for me.

Basically tsconfig is ignoring jest.config.ts but eslint is including it.

Simple solution is to add to or create .eslintignore

# jest
jest.config.*

This just tells eslint to also ignore this file which is what you want.

BrinkDaDrink
  • 1,717
  • 2
  • 23
  • 32
0

I had the same problem so I used overrides in my .eslintrc file after creating a separate tsconfig.test.json and it went well.

Here is tsconfig.test.json:

{
  "extends": "./tsconfig.json",
  "include": ["**/__tests__/**/*.test.ts"]
}

and here is .eslintrc:

 {
      "root": true,
      "env": {
        "browser": true,
        "es2021": true
      },
      "plugins": ["@typescript-eslint", "prettier"],
      "extends": ["airbnb", "airbnb-typescript", "airbnb/hooks", "prettier"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json",
        "warnOnUnsupportedTypeScriptVersion": false
      },
      "settings": {
       // some settings
      },
      "rules": {
        // some rules
      },
      "overrides": [
        {
          "files": ["src/**/*.ts"],
          "parserOptions": {
            "project": "./tsconfig.json"
          }
        },
        {
          "files": ["__tests__/**/*.test.ts"],
          "parserOptions": {
            "project": "./tsconfig.test.json"
          }
        }
      ]
    }

So basically what is happening here is that your ESLint configuration will now include the appropriate overrides for using different TypeScript configurations for your main project files as well as test files.

LW001
  • 2,452
  • 6
  • 27
  • 36
lighthouse
  • 3
  • 5
  • But when trying to run the test by "npx jest" I have got this error ``` FAIL __tests__/utils/flattenArray.test.ts ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers.``` – lighthouse Aug 21 '23 at 10:35
0

I am using Vite, i had nearly the same issue and I solved it by changing include in tsconfig file:

"include": [
    "vite.config.ts",
    ".eslintrc.cjs",
    "src"
  ],
mohamed daadaa
  • 21
  • 2