SyntaxError: Unexpected token, expected "," with Typescript

[datwaft]

Your Environment

• Prettier version: 2.7.1
• node version [12.x.x, 14.x.x]: 16.16.0
• package manager: [npm@7, pnpm@6, yarn@2] npm@8.18.0
• IDE: [VScode, Webstorm, CLI] CLI

Describe the bug

After executing npx prettier src/types/global.d.ts the following error appears:

src/types/global.d.ts[error] src/types/global.d.ts: SyntaxError: Unexpected token, expected "," (24:43)
[error]    1 | import type { MatcherContext } from "expect";
[error]    2 |
[error]    3 | import toBeValid from "@matchers/luxon/toBeValid";
[error]    4 | import toHaveSame from "@matchers/luxon/toHaveSame";
[error]    5 | import toBeSorted from "@matchers/toBeSorted";
[error]    6 | import toFollowSchema from "@matchers/toFollowSchema";
[error]    7 |
[error]    8 | type MatcherReturn = { message: () => string; pass: boolean };
[error]    9 |
[error]   10 | type Matcher<M, R, T> = M extends (
[error]   11 |   this: MatcherContext,
[error]   12 |   received: T,
[error]   13 |   ...args: infer Tail
[error]   14 | ) => MatcherReturn | Promise<MatcherReturn>
[error]   15 |   ? ReturnType<M> extends MatcherReturn
[error]   16 |     ? (...args: Tail) => R
[error]   17 |     : (...args: Tail) => Promise<R>
[error]   18 |   : never;
[error]   19 |
[error]   20 | declare global {
[error]   21 |   namespace PlaywrightTest {
[error]   22 |     interface Matchers<R, T> {
[error]   23 |       toFollowSchema: Matcher<typeof toFollowSchema, R, T>;
[error]   24 |       toBeSorted: Matcher<typeof toBeSorted<T[number]>, R, T>;
[error]   25 |       // Luxon Matchers
[error]   26 |       toBeValid: Matcher<typeof toBeValid, R, T>;
[error]   27 |       toHaveSame: Matcher<typeof toHaveSame, R, T>;
[error]   28 |     }
[error]   29 |   }
[error]   30 | }
[error]   31 |

As the error says, the line that causes the issue is

       toBeSorted: Matcher<typeof toBeSorted<T[number]>, R, T>;

At first I thought it was the same issue as #168 and #156, but I tried with workarounds recommended in both of those issues and the issue was still present.

I tried with #168 (comment) and with #156 (comment) but neither of them worked.

To Reproduce

Create a new typescript file with the following body:

// file.ts
import type { MatcherContext } from "expect";

import toBeValid from "@matchers/luxon/toBeValid";
import toHaveSame from "@matchers/luxon/toHaveSame";
import toBeSorted from "@matchers/toBeSorted";
import toFollowSchema from "@matchers/toFollowSchema";

type MatcherReturn = { message: () => string; pass: boolean };

type Matcher<M, R, T> = M extends (
  this: MatcherContext,
  received: T,
  ...args: infer Tail
) => MatcherReturn | Promise<MatcherReturn>
  ? ReturnType<M> extends MatcherReturn
    ? (...args: Tail) => R
    : (...args: Tail) => Promise<R>
  : never;

declare global {
  namespace PlaywrightTest {
    interface Matchers<R, T> {
      toFollowSchema: Matcher<typeof toFollowSchema, R, T>;
      toBeSorted: Matcher<typeof toBeSorted<T[number]>, R, T>;
      // Luxon Matchers
      toBeValid: Matcher<typeof toBeValid, R, T>;
      toHaveSame: Matcher<typeof toHaveSame, R, T>;
    }
  }
}

Execute the following commands:

npm i -D prettier @trivago/prettier-plugin-sort-imports
npx prettier file.ts --plugin='@trivago/prettier-plugin-sort-imports'

The error message must be displayed.

Expected behavior

The file should be formatted without displaying any error.

Screenshots, code sample, etc

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

As with the reproduction steps I am not using any configuration file in the reproduction.

Error log

src/types/global.d.ts[error] src/types/global.d.ts: SyntaxError: Unexpected token, expected "," (24:43)
[error]    1 | import type { MatcherContext } from "expect";
[error]    2 |
[error]    3 | import toBeValid from "@matchers/luxon/toBeValid";
[error]    4 | import toHaveSame from "@matchers/luxon/toHaveSame";
[error]    5 | import toBeSorted from "@matchers/toBeSorted";
[error]    6 | import toFollowSchema from "@matchers/toFollowSchema";
[error]    7 |
[error]    8 | type MatcherReturn = { message: () => string; pass: boolean };
[error]    9 |
[error]   10 | type Matcher<M, R, T> = M extends (
[error]   11 |   this: MatcherContext,
[error]   12 |   received: T,
[error]   13 |   ...args: infer Tail
[error]   14 | ) => MatcherReturn | Promise<MatcherReturn>
[error]   15 |   ? ReturnType<M> extends MatcherReturn
[error]   16 |     ? (...args: Tail) => R
[error]   17 |     : (...args: Tail) => Promise<R>
[error]   18 |   : never;
[error]   19 |
[error]   20 | declare global {
[error]   21 |   namespace PlaywrightTest {
[error]   22 |     interface Matchers<R, T> {
[error]   23 |       toFollowSchema: Matcher<typeof toFollowSchema, R, T>;
[error]   24 |       toBeSorted: Matcher<typeof toBeSorted<T[number]>, R, T>;
[error]   25 |       // Luxon Matchers
[error]   26 |       toBeValid: Matcher<typeof toBeValid, R, T>;
[error]   27 |       toHaveSame: Matcher<typeof toHaveSame, R, T>;
[error]   28 |     }
[error]   29 |   }
[error]   30 | }
[error]   31 |

Contribute to @trivago/prettier-plugin-sort-imports

• I'm willing to fix this bug 🥇

[datwaft]

Good news!

After #161 was merged it is working now!

I just executed npm update before, which updated this plugin to the version 3.3.1.

$ npm outdated 
Package                                Current  Wanted  Latest  Location                                            Depended by
@trivago/prettier-plugin-sort-imports    3.3.0   3.3.1   3.3.1  node_modules/@trivago/prettier-plugin-sort-imports  tset
$ npm update
changed 4 packages, and audited 74 packages in 4s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

I will close this issue as it has been fixed.