SyntaxError: Unexpected token (React native & typescript)

[TreeOfLearning]

Your Environment

• Prettier version: 3.1.1

• node version: 18.16.0

• package manager: npm

• IDE: Webstorm

Describe the bug

I am getting the following error when formatting any *.tsx file: SyntaxError: Unexpected token.

To Reproduce

Use the following Repro.tsx:

import React from "react";

export const Repro = () => {
  return (
    <div>

    </div>
  );
};

Use the following .prettierrc:

{
  "useTabs": false,
  "trailingComma": "all",
  "singleQuote": false,
  "semi": true,
  "importOrder": [
    "^react(-native)?$",
    "^~(.*)/(.*)$",
    "^@/components/(.*)$",
    "^@/pages/(.*)$",
    "^@/utils/(.*)$",
    "^@/modules/(.*)$",
    "^@icons/(.*)$",
    "^./(.*)$",
    "^(.*)$"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrderGroupNamespaceSpecifiers": true,
  "importOrderParserPlugins": ["typescript", "decorators"],
  "plugins": [
    "@babel/plugin-proposal-decorators",
    "@trivago/prettier-plugin-sort-imports"
  ]
}

Execute prettier:

$ prettier Repro.tsx
Repro.tsx
[error] Repro.tsx: SyntaxError: Unexpected token (7:5)

Expected behavior

Prettier should run successfully, without error.

Screenshots, code sample, etc

See above

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

See above

Error log

See above

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

• [ ] I'm willing to fix this bug 🥇

[TreeOfLearning]

It's amazing what a revolutionary experience submitting an issue can be. I noticed I was missing jsx from the plugins in .prettierrc and adding that solved the issue.

Doh!