Weird issue when formating Next Page components #132

SalahAdDin · 2023-10-02T15:55:20Z

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/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:399:22)
[error]     at Scope.registerBinding (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:535:16)
[error]     at Scope.registerDeclaration (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:487:14)
[error]     at Object.BlockScoped (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:254:12)
[error]     at Object.newFn (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/visitors.js:192:17)
[error]     at NodePath._call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/path/context.js:46:20)
[error]     at NodePath.call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/path/context.js:32:14)
[error]     at NodePath.visit (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/path/context.js:82:31)
[error]     at TraversalContext.visitQueue (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/context.js:86:16)
[error]     at TraversalContext.visitMultiple (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/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/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:399:22)
[error]     at Scope.registerBinding (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:535:16)
[error]     at Scope.registerDeclaration (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:480:12)
[error]     at Object.BlockScoped (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/scope/index.js:254:12)
[error]     at Object.newFn (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/visitors.js:192:17)
[error]     at NodePath._call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/path/context.js:46:20)
[error]     at NodePath.call (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/path/context.js:32:14)
[error]     at NodePath.visit (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/path/context.js:82:31)
[error]     at TraversalContext.visitQueue (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/context.js:86:16)
[error]     at TraversalContext.visitSingle (/home/luisalaguna/Projects/challenge-trt/node_modules/.pnpm/@babel+traverse@7.23.0/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 🥇

The text was updated successfully, but these errors were encountered:

IanVS · 2023-10-02T16:25:43Z

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

venerated · 2023-12-27T20:44:00Z

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 · 2023-12-28T01:47:21Z

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 · 2024-01-26T23:27:41Z

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/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/scope/index.js:399:22)
[error]     at Scope.registerBinding (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/scope/index.js:535:16)
[error]     at Scope.registerDeclaration (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/scope/index.js:487:14)
[error]     at Object.BlockScoped (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/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/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/visitors.js:195:17)
[error]     at NodePath._call (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/path/context.js:46:20)
[error]     at NodePath.call (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/path/context.js:32:14)
[error]     at NodePath.visit (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/path/context.js:82:31)
[error]     at TraversalContext.visitQueue (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/context.js:86:16)
[error]     at TraversalContext.visitMultiple (/home/xrendan/dev/yuma/nextjs-dashboard/node_modules/.pnpm/@babel+traverse@7.23.9/node_modules/@babel/traverse/lib/context.js:61:17)

package.json
.prettierrc.json

SalahAdDin assigned IanVS Oct 2, 2023

IanVS added bug Something isn't working needs reproduction Awaiting a minimal reproduction for further investigation labels Oct 2, 2023

IanVS mentioned this issue Mar 11, 2024

Import Order does not work in last version #146

Closed

1 task

IanVS mentioned this issue Mar 20, 2024

Next.js compatibility and React Server Components compatibility #163

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Weird issue when formating Next Page components #132

Weird issue when formating Next Page components #132

SalahAdDin commented Oct 2, 2023 •

edited

IanVS commented Oct 2, 2023

venerated commented Dec 27, 2023 •

edited

SalahAdDin commented Dec 28, 2023

yuma-brendan commented Jan 26, 2024

Weird issue when formating Next Page components #132

Weird issue when formating Next Page components #132

Comments

SalahAdDin commented Oct 2, 2023 • edited

IanVS commented Oct 2, 2023

venerated commented Dec 27, 2023 • edited

SalahAdDin commented Dec 28, 2023

yuma-brendan commented Jan 26, 2024

SalahAdDin commented Oct 2, 2023 •

edited

venerated commented Dec 27, 2023 •

edited