Slow Prettier formatting performance issue when working in Next.js project #48258

Seefer · 2023-04-11T17:15:30Z

Seefer
Apr 11, 2023

Summary

Very slow format on save performance in Next.js project, usually when dev script is running and frequently see this pop-up at bottom right. This can happen when editing any .tsx file in the project:

This format progress often takes anywhere from 10 to 20 seconds. This only seems to happen when I'm in a Next.js project and usually when the pnpm dev script is running and hot-reload is in effect. I'm unsure if this is Prettier or Next.js related but given Prettier format seems to behave fine in non-Next.js projects, I thought someone here could provide insight.

Additional information

I also see odd output in Prettier console on Next.js _app.tsx vs other files in the pages folder. With _document.tsx I get this output:

["INFO" - 5:36:15 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_document.tsx
["INFO" - 5:36:15 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:36:15 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:36:15 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:36:15 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:36:15 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_document.tsx",
  "parser": "typescript",
  "rangeEnd": 187,
  "rangeStart": 167,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:36:15 PM] Formatting completed in 8ms.

The code in _document.tsx is:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

If I switch to _app.tsx and save I get this output:

["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 72,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 12ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 140,
  "rangeStart": 140,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 6ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 282,
  "rangeStart": 259,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 10ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 631,
  "rangeStart": 482,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 8ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 140,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 8ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 631,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 10ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 631,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 9ms.

The code in _app.tsx is:

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Fira_Code, Nunito, Roboto_Flex } from 'next/font/google';

const robotoflex = Roboto_Flex({
  subsets: ['latin'],
  variable: '--font-robotoflex',
});

const fira = Fira_Code({
  subsets: ['latin'],
  variable: '--font-fira',
});

const nunito = Nunito({
  subsets: ['latin'],
  variable: '--font-nunito',
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main
      className={`prose prose-headings:font-serif prose-p:font-sans prose-code:font-mono ${robotoflex.variable} ${nunito.variable} ${fira.variable}`}
    >
      <Component {...pageProps} />
    </main>
  );
}

Is this lengthy output when editing _app.tsx vs _document.tsx normal and if not, could this be related to the occasional formatting pop-up message that takes many seconds? It also seems to only happen when I'm running pnpm dev script with hot-reload benefits while editing .tsx files



### Example

_No response_

DougFlands · 2023-04-23T07:18:53Z

DougFlands
Apr 23, 2023

I have the same problem.
Additionally, I have a project built with Vite, and everything is working well so far.

0 replies

arslonbekXX · 2023-05-05T01:53:31Z

arslonbekXX
May 5, 2023

I have the same problem.

0 replies

SpinBoxx · 2023-05-10T17:01:49Z

SpinBoxx
May 10, 2023

Same for me, someone already solved this ?

0 replies

DougFlands · 2023-05-13T12:09:20Z

eder3232 · 2023-06-26T00:05:15Z

eder3232
Jun 26, 2023

i have the same problem

0 replies

sohaibex · 2023-08-26T21:47:52Z

sohaibex
Aug 26, 2023

Same prob

0 replies

aloksinghse · 2023-09-17T11:07:46Z

aloksinghse
Sep 17, 2023

if you guys are using any of these extenstion. the try to uninstall it and then check

i removed it and now it is working fine

7 replies

Auto Import
Auto Import - ES6, TS, JSX, TSX
Auto Import - ES6 & TS
Flutter-Auto-Import

Michael-Obele · 2024-10-22T16:43:55Z

Michael-Obele
Oct 22, 2024

It's 2024; is this still unanswered?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slow Prettier formatting performance issue when working in Next.js project #48258

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 9 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Slow Prettier formatting performance issue when working in Next.js project #48258

Summary

Additional information

Replies: 8 comments · 9 replies

Replies: 8 comments 9 replies