Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Weird issue when formating Next Page components #132

Closed
1 task
SalahAdDin opened this issue Oct 2, 2023 · 7 comments
Closed
1 task

Weird issue when formating Next Page components #132

SalahAdDin opened this issue Oct 2, 2023 · 7 comments
Assignees
Labels
bug Something isn't working needs reproduction Awaiting a minimal reproduction for further investigation

Comments

@SalahAdDin
Copy link

SalahAdDin commented Oct 2, 2023

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 🥇
@IanVS
Copy link
Owner

IanVS commented Oct 2, 2023

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

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

venerated commented Dec 27, 2023

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
Copy link
Author

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
Copy link

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

@IanVS
Copy link
Owner

IanVS commented Jun 25, 2024

@yuma-brendan that is only valid typescript when isolatedModules is not enabled. The problem is that while tsc runs on your entire codebase and understands that the Failure being imported is a type, prettier (and many other tools) only run on a per-file basis. So, in your example they have no way of knowing whether Failure is a type or value.

I'd recommend enabling isolatedModules or even better verbatimModuleSyntax, and using https://typescript-eslint.io/rules/consistent-type-imports/ to make sure that all of your type-only imports use the type keyword.

Unfortunately, there's nothing we can do on our end to address this.

@IanVS IanVS closed this as not planned Won't fix, can't repro, duplicate, stale Jun 25, 2024
@SalahAdDin
Copy link
Author

@yuma-brendan that is only valid typescript when isolatedModules is not enabled. The problem is that while tsc runs on your entire codebase and understands that the Failure being imported is a type, prettier (and many other tools) only run on a per-file basis. So, in your example they have no way of knowing whether Failure is a type or value.

I'd recommend enabling isolatedModules or even better verbatimModuleSyntax, and using https://typescript-eslint.io/rules/consistent-type-imports/ to make sure that all of your type-only imports use the type keyword.

Unfortunately, there's nothing we can do on our end to address this.

We have the default behaviour on the linter and the those options in tsconfig and yet we have the issue.

No way to fix it, right?

@IanVS
Copy link
Owner

IanVS commented Jun 27, 2024

If you have that option set in tsconfig then the code shared would not compile. Can you share a minimal reproduction that shows your uissue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs reproduction Awaiting a minimal reproduction for further investigation
Projects
None yet
Development

No branches or pull requests

4 participants