Next.js 11 fails on custom .babelrc with JSON5 syntax

[jwilsson]

What version of Next.js are you using?

11.0.0 (same issue with 11.0.1-canary.0)

What version of Node.js are you using?

16.3.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

This is a follow-up to #26131 given that was closed and I've managed to really track it down further. I think #26156 is caused by the same issue as well.

When using a custom .babelrc containing a trailing comma (or other JSON5 syntax) the config parsing will fail. Babel's docs mentions they using JSON5 to parse .babelrc files which isn't the case in the new Next.js 11 babel-loader. I think it would make sense to follow the same behaviour as Babel.

Expected Behavior

No errors, Next should be able to use my custom .babelrc just fine.

To Reproduce

Create a .babelrc file in the root of your Next.js project.

Enter the following code:

{
    "presets": ["next/babel"],
}

This will also trigger the same issue:

{
    "presets": ["next/babel"] // Note, no trailing comma but a comment
}

I'd be happy to provide a PR fixing this issue.

[HassaanShah016]

@timneutkens What's the solution ?

[ijjk]

This should be fixed in v11.0.1-canary.2 of Next.js, please update and give it a try!

[tunesmith]

Came here from #25434, but it looks like this bug also exists on 10.2.4.canary3.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.