SyntaxError: Type parameter list cannot be empty

[PaulRBerg]

Your Environment

• Plugin Sort Imports version: 5.2.1
• Prettier version: 3.4.2
• TypeScript version: 5.6.2
• node version: 22.12.0
• package manager: bun@1
• IDE: VSCode

Describe the bug

I cannot format a file that contains an empty React component, i.e., <> ... </>

To Reproduce

Copy the code below into a TypeScript project and try to format it with Prettier.

You can go through the Docusaurus installation for a quickstart.

Expected behavior

The file should be formattable. If I disable the plugin, I can format the file just fine.

Code sample

See line 20 here:

See code sample

import type { ReactNode } from "react";
import clsx from "clsx";
import Heading from "@theme/Heading";
import styles from "./styles.module.css";
import MountainSVG from "@site/static/img/undraw_docusaurus_mountain.svg";
import TreeSVG from "@site/static/img/undraw_docusaurus_tree.svg";
import ReactSVG from "@site/static/img/undraw_docusaurus_react.svg";

type FeatureItem = {
  title: string;
  Svg: React.ComponentType<React.ComponentProps<"svg">>;
  description: ReactNode;
};

const FeatureList: FeatureItem[] = [
  {
    title: "Easy to Use",
    Svg: MountainSVG,
    description: (
      <>
        Docusaurus was designed from the ground up to be easily installed and used to get your website up and running
        quickly.
      </>
    ),
  },
  {
    title: "Focus on What Matters",
    Svg: TreeSVG,
    description: (
      <>
        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead and move your docs into the{" "}
        <code>docs</code> directory.
      </>
    ),
  },
  {
    title: "Powered by React",
    Svg: ReactSVG,
    description: (
      <>
        Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the same
        header and footer.
      </>
    ),
  },
];

function Feature({ title, Svg, description }: FeatureItem) {
  return (
    <div className={clsx("col col--4")}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <Heading as="h3">{title}</Heading>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures(): React.ReactElement {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}

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

Toggle to see it:

Details

Prettier config:

plugins:
  - "@trivago/prettier-plugin-sort-imports"
printWidth: 120
proseWrap: "always"
trailingComma: "all"

overrides:
  - files: ["*.ts", "*.tsx"]
    options:
      importOrderParserPlugins: ["typescript"]
      importOrderSeparation: true
      importOrderSortSpecifiers: true
      parser: "typescript"

Error log

SyntaxError: Type parameter list cannot be empty. (20:6)
    at constructor (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:359:19)
    at TypeScriptParserMixin.raise (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:3266:19)
    at TypeScriptParserMixin.tsParseTypeParameters (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:7803:12)
    at /Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:9448:29
    at TypeScriptParserMixin.tryParse (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:3604:20)
    at TypeScriptParserMixin.parseMaybeAssign (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:9446:24)
    at /Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:10353:39
    at TypeScriptParserMixin.allowInAnd (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:11955:12)
    at TypeScriptParserMixin.parseMaybeAssignAllowIn (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:10353:17)
    at TypeScriptParserMixin.parseParenAndDistinguishExpression (/Users/prb/Projects/prb-longevity/node_modules/@babel/parser/lib/index.js:11214:28)

[jaromir-roth]

In my case adding jsx into importOrderParserPlugins property in the prettier config file helped.