Prettier reporting SyntaxError in JSX

Question

Just spun up a new React project and decided to use Prettier in it. However, in all of my .tsx files Prettier reports syntax errors on the first line of JSX. For example:

src/components/layout/Layout.tsx

function Layout(): React.ReactElement {
  return (
    <div className="layout-component">
      <header>
        <span>Installations</span>
        <span>Projects</span>
      </header>
    </div>
  );
}

export default Layout;

Results in:

$ npx prettier src/components/layout/Layout.tsx 
src/components/layout/Layout.tsx
[error] src/components/layout/Layout.tsx: SyntaxError: Unexpected token, expected "," (3:9)

Relevant versions out of package.json:

    "react": "^18.2.0",
    "react-dom": "^18.2.0"

    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "prettier": "^3.2.5",
    "typescript": "^5.0.2",

And .prettierrc:

{
  "tabWidth": 2,
  "printWidth": 100,

  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^[./]"],
  "importOrderParserPlugins": ["typescript"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

And tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "allowUmdGlobalAccess": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "forceConsistentCasingInFileNames": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "verbatimModuleSyntax": true
  },
  "include": ["src"]
}

Answer 1

After a few days of fiddling with it, I found the offending piece to be in the Prettier config:

  "importOrderParserPlugins": ["typescript"],

Removing this fixes the issue.