ESLint "Parsing error: ',' expected." when using TypeScript satisfies operator

Question

I'm trying to use TypeScript's new satisfies operator to keep the most specific type for a variable in my code, but ESLint is throwing a Parsing error: ',' expected. error on the closing curly bracket of the object when I add satisfies Prisma.gameInclude; to the end of it.

Here's how the object in question looks:

const includeFields = {
  participants: true,
  queue: {
    include: {
      gamemode: {
        include: {
          character_pool: {
            include: {
              characters: true,
            },
          },
        },
      },
    },
  },
} satisfies Prisma.gameInclude;
^ Parsing error: ',' expected.

And here's my .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "unused-imports"],
  rules: {
    "unused-imports/no-unused-imports": "error",
  },
};

I've tried adding the parserOptions.project property to it pointing to my tsconfig, but no luck.

Reading through some PRs and issues for typescript-eslint I found our that it does already support the satisfies operator. I'm currently on its latest version, 5.56.0.

How can I fix this?

Piero

did you manage to fix this bro? i'm having the same problem with tailwind.config.ts in an electron-forge app. help edit: nevermind, i restarted vscode and it fix my problem after updating typescript. thank you! – Teakettle

Answer 1

Well, that's embarassing. I found the cause of the error a few minutes after posting this question.

Upon checking the package.json for this project I found out that typescript was on version 4.3.5. The satisfies operator was added on TypeScript 4.9.

Updating TS to its newest version, 5.0.2, fixed the issue.

Piero

Where do you change it? I don't have any typescript version specified in package.json or tsconfig.json, and I just updated typescript-eslint to latest version. Still have the same issue. – Democratic

You can npm install typescript@VERSION --save-dev to install a specific version. – Piero

did try updating typescript to latest but didn't work. edit: i think vscode needs to restart first. it did fix my problem. sorry and thanks!! – Teakettle

Also worked for me, but you also may need to upgrade prettier package. – Empoison

Answer 2

For others coming to this question who are using typescript version 4.9 or later, the other common cause is using prettier below version 2.8 (https://github.com/prettier/prettier/issues/13516).

Halfbeak

Answer 3

in my cases it solved becuse import the component after return and not put it in a fragment or div element. put the code in curly braces{} in to an html element , the error fixs.

`

{
    cabins.map((cabin)=>(
        <CabinCard key={cabin.id} {...cabin}/>
        
    ))
}

`

Ningsia