vercel / vercel/next.js

Unable to fix logs `[BABEL] Note: The code generator has deoptimised the styling of`

Open
#53,807 17 comments 14 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 13h
Merged PRs (30d)
334

Description

Verify canary release
  • I verified that the issue exists in the latest Next.js canary release
Provide environment information

All environments are impacted.

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

Not available.

To Reproduce

By default, Babel will show these types of logs:

[BABEL] Note: The code generator has deoptimised the styling of some.generated.file.ts as it exceeds the max of 500KB.

It's very easy to fix them, by using the Babel Compact Option

Unfortunatelly the current Next.js config loader does not support the compact option so there is no way to get rid of this error.

The only avilable workaround is to use overrides in the Webpack Next.js config:

config.module.rules.forEach((rule) => {
    rule?.oneOf?.forEach((nestedRule) => {
      if (nestedRule?.use?.loader?.includes('babel')) {
        nestedRule.use.options.overrides = nestedRule.use.options.overrides ?? []
        // Prevents duplicate overrides in dev.
        if (
          !nestedRule.use.options.overrides.some(
            (override) => override.test === nestedRule.test && override.compact === true
          )
        ) {
          nestedRule.use.options.overrides.push({
            test: nestedRule.test,
            compact: true,
          })
        }
      }
    })
  })
Describe the Bug

This will happen in any project with files bigger than 500KB that uses Babel.

Expected Behavior

I would expect to be able to get rid of those logs by setting the compact Babel option. Currently this option is being ignored.

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/next/src/build/babel/loader/get-config.ts and trace how Babel options are loaded by the Next.js config loader. Verify the compact option behavior against the reported Babel deoptimization log; done means users can configure compact without the current Webpack overrides workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js
Domain
build-system
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.