Weird issue when formating Next Page components

[SalahAdDin]

Your Environment

• Prettier version: 3.0.3
• node version: 18.2.1
• package manager: pnpm@8
• IDE: VSCode

Describe the bug When trying to format the page.tsx files on my NextJS 13 project (with the app routing page), it fails terribly.

To Reproduce

• Create a new project using NextJS, choose prettier, typescript and app route on the options.
• Install the plugin and set it.

"plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "",
    "^(^react$|@react|react)",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@(.*)$",
    "",
    "^[./]"
  ],
  "importOrderParserPlugins": ["importAssertions", "typescript", "jsx"],

• Create a new page.tsx on a subroute or update it.
• Import normally.

import Content from "@/app/components/content/Content";
import utils from "@/core/application/utils";
import {
  Image as ImageNode,
  News,
  NewsDetail,
  StandardMediaProps,
} from "@/core/domain/news.dto";
import { makeApiRequest } from "@/core/infrastructure/api";
import { Divider } from "@nextui-org/divider";
import { Link } from "@nextui-org/link";
import { User } from "@nextui-org/user";
import { Metadata, ResolvingMetadata } from "next";
import Image from "next/image";
import NextLink from "next/link";
import React from "react";

const { NEXT_PUBLIC_DOMAIN } = process.env;
const { date: dateUtils } = utils;

• Save it.
• Format it.
• Check the error.

Expected behavior

As it happens when we formatted in other files, all import should be ordered without any fail.

Screenshots, code sample, etc

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

{
  "parser": "typescript",
  "printWidth": 80,
  "arrowParens": "always",
  "semi": true,
  "tabWidth": 2,
  "endOfLine": "auto",
  "trailingComma": "es5",
  "useTabs": false,
  "quoteProps": "consistent",
  "bracketSameLine": true,
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "",
    "^(^react$|@react|react)",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@(.*)$",
    "",
    "^[./]"
  ],
  "importOrderParserPlugins": ["importAssertions", "typescript", "jsx"],
  "overrides": [
    {
      "files": ["*.js", "*.cjs", "*.mjs"],
      "options": {
        "parser": "meriyah"
      }
    },
    {
      "files": ["*.ts", "*.cts"],
      "options": {
        "parser": "typescript"
      }
    },
    {
      "files": ["*.json", "*.jsonc", ".*rc"],
      "options": {
        "parser": "json"
      }
    },
    {
      "files": "*.css",
      "options": {
        "parser": "css"
      }
    }
  ]
}

Error log

> prettier src  --check "--write"

Checking formatting...
src/app/news/[...path]/page.tsx
[error] src/app/news/[...path]/page.tsx: TypeError: Cannot read properties of undefined (reading 'buildError')
[error]     at Scope.checkBlockScopedCollisions (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:399:22)
[error]     at Scope.registerBinding (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:535:16)
[error]     at Scope.registerDeclaration (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:487:14)
[error]     at Object.BlockScoped (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:254:12)
[error]     at Object.newFn (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/visitors.js:192:17)
[error]     at NodePath._call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:46:20)
[error]     at NodePath.call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:32:14)
[error]     at NodePath.visit (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:82:31)
[error]     at TraversalContext.visitQueue (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:86:16)
[error]     at TraversalContext.visitMultiple (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:61:17)
[warn] src/app/news/components/NewsCard.test.tsx
[warn] src/app/news/components/NewsCard.tsx
[warn] src/app/news/components/NewsList.tsx
[warn] src/app/news/components/Pagination.tsx
src/app/news/page.tsx
[error] src/app/news/page.tsx: TypeError: Cannot read properties of undefined (reading 'buildError')
[error]     at Scope.checkBlockScopedCollisions (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:399:22)
[error]     at Scope.registerBinding (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:535:16)
[error]     at Scope.registerDeclaration (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:480:12)
[error]     at Object.BlockScoped (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:254:12)
[error]     at Object.newFn (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/visitors.js:192:17)
[error]     at NodePath._call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:46:20)
[error]     at NodePath.call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:32:14)
[error]     at NodePath.visit (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:82:31)
[error]     at TraversalContext.visitQueue (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:86:16)
[error]     at TraversalContext.visitSingle (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:65:19)
[warn] Code style issues fixed in 4 files.
 ELIFECYCLE  Command failed with exit code 2.
 ELIFECYCLE  Command failed with exit code 1.

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

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

[IanVS]

Thanks for the report, @SalahAdDin. Would you be willing to create a minimal reproduction repo that we can take a look at?

[venerated]

I had this same issue, not sure if the exact same error as I didn't print the error message, but I started creating a minimal reproduction repo and did not have the error there. Seemingly, closing VS Code and reopening it fixed the issue. 🙈

[SalahAdDin]

Thanks for the report, @SalahAdDin. Would you be willing to create a minimal reproduction repo that we can take a look at?

I will check it as soon as possible.

[yuma-brendan]

We were seeing the same issue, and (for us) this is caused by importing a typescript type with the same name as the default export

Minimal reproduction (the failures.ts file doesn't need to exist)

import { Failure } from './failures'; // <------ Causes erorr because of a name collision, even though this is valid TS 
const Failure = ({}) => {
  return (
    <>
    </>
  );
};

export default Failure;

pnpm exec prettier --write --ignore-unknown --no-error-on-unmatched-pattern "app/lib/Failure.tsx"

app/lib/Failure.tsx
[error] app/lib/Failure.tsx: TypeError: Cannot read properties of undefined (reading 'buildError')
[error]     at Scope.checkBlockScopedCollisions (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:399:22)
[error]     at Scope.registerBinding (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:535:16)
[error]     at Scope.registerDeclaration (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:487:14)
[error]     at Object.BlockScoped (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/scope/index.js:254:1
[prettierrc.json](https://github.com/IanVS/prettier-plugin-sort-imports/files/14070107/prettierrc.json)
2)
[error]     at Object.newFn (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/visitors.js:195:17)
[error]     at NodePath._call (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:46:20)
[error]     at NodePath.call (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:32:14)
[error]     at NodePath.visit (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:82:31)
[error]     at TraversalContext.visitQueue (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:86:16)
[error]     at TraversalContext.visitMultiple (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:61:17)

package.json .prettierrc.json