Unable to fix logs `[BABEL] Note: The code generator has deoptimised the styling of`
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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