From cacf34db133b5d2d209dacf8b95930152a50bb77 Mon Sep 17 00:00:00 2001
From: Jonathan Wilsson <jonathan.wilsson@gmail.com>
Date: Wed, 16 Jun 2021 19:26:43 +0200
Subject: [PATCH] Fix babel-loader failing on JSON5 syntax (#26194)

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes

Fixes: https://github.com/vercel/next.js/issues/26163
---
 packages/next/build/babel/loader/get-config.ts       |  3 ++-
 .../babel-custom/fixtures/babel-json5/.babelrc       | 12 ++++++++++++
 .../babel-custom/fixtures/babel-json5/pages/index.js |  1 +
 test/integration/babel-custom/test/index.test.js     |  4 ++++
 4 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 test/integration/babel-custom/fixtures/babel-json5/.babelrc
 create mode 100644 test/integration/babel-custom/fixtures/babel-json5/pages/index.js

diff --git a/packages/next/build/babel/loader/get-config.ts b/packages/next/build/babel/loader/get-config.ts
index 22be2e05fb181..e44d07822851d 100644
--- a/packages/next/build/babel/loader/get-config.ts
+++ b/packages/next/build/babel/loader/get-config.ts
@@ -1,4 +1,5 @@
 import { readFileSync } from 'fs'
+import JSON5 from 'next/dist/compiled/json5'
 
 import { createConfigItem, loadOptions } from 'next/dist/compiled/babel/core'
 import loadConfig from 'next/dist/compiled/babel/core-lib-config'
@@ -151,7 +152,7 @@ const isJsFile = /\.js$/
 function getCustomBabelConfig(configFilePath: string) {
   if (isJsonFile.exec(configFilePath)) {
     const babelConfigRaw = readFileSync(configFilePath, 'utf8')
-    return JSON.parse(babelConfigRaw)
+    return JSON5.parse(babelConfigRaw)
   } else if (isJsFile.exec(configFilePath)) {
     return require(configFilePath)
   }
diff --git a/test/integration/babel-custom/fixtures/babel-json5/.babelrc b/test/integration/babel-custom/fixtures/babel-json5/.babelrc
new file mode 100644
index 0000000000000..b22791fb4296b
--- /dev/null
+++ b/test/integration/babel-custom/fixtures/babel-json5/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-env": {
+          "modules": "commonjs" // Here's a comment
+        }
+      }
+    ]
+  ]
+}
diff --git a/test/integration/babel-custom/fixtures/babel-json5/pages/index.js b/test/integration/babel-custom/fixtures/babel-json5/pages/index.js
new file mode 100644
index 0000000000000..69192c68a0ce5
--- /dev/null
+++ b/test/integration/babel-custom/fixtures/babel-json5/pages/index.js
@@ -0,0 +1 @@
+export default () => <h1>Hello World</h1>
diff --git a/test/integration/babel-custom/test/index.test.js b/test/integration/babel-custom/test/index.test.js
index b502b31aeb75a..4ead59cdc8fc3 100644
--- a/test/integration/babel-custom/test/index.test.js
+++ b/test/integration/babel-custom/test/index.test.js
@@ -17,4 +17,8 @@ describe('Babel', () => {
   it('should allow setting targets to a string', async () => {
     await nextBuild(join(__dirname, '../fixtures/targets-string'))
   })
+
+  it('should allow babelrc JSON5 syntax', async () => {
+    await nextBuild(join(__dirname, '../fixtures/babel-json5'))
+  })
 })