VScode: Unexpected identifier 'de' after upgrading to 4.0.0

[aokigit]

Your Environment

• Prettier version: 2.8.8
• node version: 19.8.1
• package manager: NPM 8.5.0
• IDE: VScode

Describe the bug

When saving a file, the following error pops up: SyntaxError: Unexpected identifier 'de'

To Reproduce

Save a JSX file.

Code sample

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import clsx from "clsx";
import Icon from "@/components/UI/Icon";

export  default  function  Sidebar()  {
  const pathname = usePathname();

  return (
    <aside className="relative flex w-64 flex-none flex-col border-r border-secondary-200 py-12 pr-12">
      <ul className="fixed bottom-12 top-32 flex w-52 flex-1 flex-col">
        {navigation.map((item) => (
          <li key={item.id} className="mb-6 last:mb-0 last:mt-auto">
            {item.category && <div className="mb-2 ml-2.5 text-sm font-semibold text-secondary-800">{item.category}</div>}
            <ul className="space-y-0.5">
              {item.links.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className={clsx(
                      pathname === link.href || (pathname.startsWith(link.href) && link.href !== "/dashboard")
                        ? "border-secondary-200 bg-white shadow-sm"
                        : "border-transparent hover:border-secondary-200 hover:bg-white hover:shadow-sm",
                      "flex items-center rounded-md border px-2.5 py-2"
                    )}
                  >
                    <Icon
                      name={link.icon}
                      className={clsx(
                        pathname === link.href || (pathname.startsWith(link.href) && link.href !== "/dashboard") ? "text-brand-500" : "text-secondary-400",
                        "mr-2.5 h-6 w-6"
                      )}
                    />
                    <span className="text-sm font-medium">{link.name}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </aside>
  );
}

Configuration File (.prettierrc.json)

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "printWidth": 180,
  "quoteProps": "consistent",
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "^@/styles/(.*)$",
    "^@/config/(.*)$",
    "^@/schemas/(.*)$",
    "^@/lib/(.*)$",
    "^@/actions/(.*)$",
    "^@/components/(.*)$",
    "^@/contentlayer/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]"
  ],
  "importOrderParserPlugins": ["jsx", "decorators-legacy"]
}

Error log

["ERROR" - 8:29:00 PM] Error formatting document.
["ERROR" - 8:29:00 PM] Unexpected identifier 'de'
SyntaxError: Unexpected identifier 'de'
    at nodes.reduce (e:\REDACTED\REDACTED\node_modules\@ianvs\prettier-plugin-sort-imports\lib\src\utils\merge-nodes-with-matching-flavors.js:19:78)
    at Array.reduce (<anonymous>)
    at selectMergeableNodesByImportFlavor (e:\REDACTED\REDACTED\node_modules\@ianvs\prettier-plugin-sort-imports\lib\src\utils\merge-nodes-with-matching-flavors.js:18:18)
    at mergeNodesWithMatchingImportFlavors (e:\REDACTED\REDACTED\node_modules\@ianvs\prettier-plugin-sort-imports\lib\src\utils\merge-nodes-with-matching-flavors.js:173:20)
    at getSortedNodes (e:\REDACTED\REDACTED\node_modules\@ianvs\prettier-plugin-sort-imports\lib\src\utils\get-sorted-nodes.js:58:101)
    at preprocessor (e:\REDACTED\REDACTED\node_modules\@ianvs\prettier-plugin-sort-imports\lib\src\preprocessors\preprocessor.js:36:65)
    at Object.defaultPreprocessor [as preprocess] (e:\REDACTED\REDACTED\node_modules\@ianvs\prettier-plugin-sort-imports\lib\src\preprocessors\default.js:8:44)
    at Object.preprocess (e:\REDACTED\REDACTED\node_modules\prettier-plugin-tailwindcss\dist\index.js:2368:43662)
    at Object.parse (e:\REDACTED\REDACTED\node_modules\prettier\index.js:7511:25)
    at coreFormat (e:\REDACTED\REDACTED\node_modules\prettier\index.js:8829:18)
    at formatWithCursor2 (e:\REDACTED\REDACTED\node_modules\prettier\index.js:9021:18)
    at e:\REDACTED\REDACTED\node_modules\prettier\index.js:38183:12
    at Object.format (e:\REDACTED\REDACTED\node_modules\prettier\index.js:38197:12)
    at t.default.format (c:\Users\REDACTED\.vscode\extensions\esbenp.prettier-vscode-9.13.0\dist\extension.js:1:14756)
    at t.PrettierEditProvider.provideEdits (c:\Users\REDACTED\.vscode\extensions\esbenp.prettier-vscode-9.13.0\dist\extension.js:1:11429)
    at z.provideDocumentFormattingEdits (c:\Users\REDACTED\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:47446)
["INFO" - 8:29:00 PM] Formatting completed in 22ms.

[IanVS]

Hi, thanks for the report, @aokigit! I tried to reproduce the issue in our test suite, and am not able to. Is there any chance you could put together a small reproduction repo or a stackblitz or something, so that I can investigate what's going on?

[kyh]

I ran into the same issue and restarting vscode worked for me

[simbo]

I ran into the same issue and restarting vscode worked for me

Confirmed. Restarting vscode fixes the issue.

[IanVS]

Thanks everyone. I'll leave this open a bit longer to help anyone else who comes here searching for the issue, but it sounds like it's not something on our end, and has to do more with VSCode.

[aokigit]

I came back to my codebase today, upgraded to 4.0.1 and the error doesn't appear anymore. Everything works as it should now. 👍