nextjs - ✅(Solved) Fix Issue importing Prettier in Next 16 [1 pull requests, 6 comments, 4 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#85674Fetched 2026-04-08 02:14:31
View on GitHub
Comments
6
Participants
4
Timeline
23
Reactions
2
Timeline (top)
commented ×6labeled ×6subscribed ×5mentioned ×4

Error Message

  1. You should view "Application error" displayed on the page

Fix Action

Fix / Workaround

I thought for a second that maybe it was related to 83925, but the issue was not fixed by switching from SWC to Babel (by adding a .babelrc). It also wasn't fixed by switching to the latest canary version of Next (which is believed to fix the SWC issue).

PR fix notes

PR #190: fix: Code formatting and added support for multiple languages (#189)

Description (problem / solution / changelog)

Summary

Added Web Assembly based code formatters to the code editor, All formatting done on the client-side with WASM based formatters.

Supported Languages:

  • JavaScript (using Prettier)
  • Python (using Ruff)
  • C++ (using clang-format)
  • Java (using clang-format)

Technical Changes

  • Added WASM formatter packages for C++, Java, and Python
  • Created a centralized formatter utility that handles all languages
  • Updated Next.js config to support WebAssembly modules
  • Switched build tooling to webpack (Turbopack doesn't fully support WASM yet)
  • Fixed a build error caused by an unused Node.js import

Related issues

  • Fixes #189

Checklist

  • I ran npm run lint locally
  • I ran npm run build locally
  • This change is scoped and focused
  • Docs updated (if needed)

I did testing and everything passed

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

Summary by CodeRabbit

  • New Features

    • Code editor now formats C++, Java, Python, and JavaScript via a unified, on-demand formatter for all supported languages.
  • Refactor

    • Switched to a modular, WebAssembly-backed formatting pipeline for faster, more consistent formatting across languages.
  • Chores

    • Build tooling updated to support the new WASM-based formatters and packaging; small housekeeping (ignore rules) applied.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Changed files

  • .gitignore (modified, +1/-0)
  • next.config.mjs (modified, +20/-0)
  • package-lock.json (modified, +191/-180)
  • package.json (modified, +4/-2)
  • src/components/CodeEditor.jsx (modified, +2/-11)
  • src/lib/formatters.js (added, +82/-0)
  • src/lib/problems.js (modified, +0/-2)

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 9.1.4
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/joshwcomeau/next-16-prettier-repro

To Reproduce

  1. Run a production build (npm run build)
  2. Start a server (npm run start)
  3. You should view "Application error" displayed on the page
  4. Opening the browser console shows a ReferenceError, la is not defined.

Quick overview

This app uses Prettier to format code in-browser. The real-world use case I’m reproducing here is having a live-editable code playground that uses Prettier to format user-generated code. This repro is simplified, and what we’re trying to do is format a small test snippet.

I realize that this really seems like an issue with Prettier, but I don't believe it is. More info below.

Current vs. Expected behavior

I’ve included a testCode string with poorly-formatted code, and the expected behaviour is that the correctly-formatted code should be displayed in the console. This works fine in development, but breaks in production.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 9.1.4
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Module Resolution, Runtime, Webpack, Turbopack

Which stage(s) are affected? (Select all that apply)

next start (local)

Additional context

I believe this issue was introduced with 16.0.0-canary.1. The issue is still present on the latest canary version (16.0.2-canary.3)

The issue appears to be specifically with prettier/plugins/babel. The build succeeds, but the code doesn't actually get bundled correctly in production.

I don't believe this is an issue with Prettier. The issue appears to have been introduced in Next 16 (the same code works fine with Next 15.5.6), and the issue isn’t specific to the latest version of Prettier (I tested a two-year-old version of Prettier, 3.0.3, and it had the same issue).

The issue happens with both Turbopack and Webpack, which was a bit of a surprise; I originally thought this was a Turbopack issue. It also happens in both the Pages and App router.

I thought for a second that maybe it was related to 83925, but the issue was not fixed by switching from SWC to Babel (by adding a .babelrc). It also wasn't fixed by switching to the latest canary version of Next (which is believed to fix the SWC issue).

extent analysis

TL;DR

The issue is likely related to a compatibility problem between Next.js 16 and Prettier, causing a ReferenceError in production builds.

Guidance

  • Verify that the issue is indeed related to the prettier/plugins/babel interaction by testing with different versions of Prettier or disabling the Babel plugin.
  • Check the Next.js documentation and release notes for any known issues or breaking changes related to Prettier or Babel integration in version 16.
  • Attempt to reproduce the issue with a minimal example using only the necessary dependencies (Next.js, Prettier, and Babel) to isolate the problem.
  • Consider testing with an older version of Next.js (e.g., 15.5.6) to confirm that the issue is specific to version 16.

Example

No specific code example is provided, as the issue is likely related to the interaction between Next.js and Prettier, and the reproducible example is already available in the provided GitHub repository.

Notes

The issue may be specific to the combination of Next.js 16 and Prettier, and further investigation is needed to determine the root cause. The fact that the issue occurs with both Turbopack and Webpack suggests that it may not be related to the bundler.

Recommendation

Apply a workaround by downgrading to Next.js 15.5.6, as the issue is not present in this version, until a fix is available for Next.js 16.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING