Babel & next-swc: Fix exporting page config with AsExpression (vercel…

…#32702) fixes vercel#20626 No changes needed in next-swc, see comments from @kdy1 below. Co-authored-by: JJ Kasper <[email protected]>
natew · Feb 16, 2022 · 1cd24d9 · 1cd24d9
1 parent e3e80a9
commit 1cd24d9
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 5 deletions.
diff --git a/packages/next/build/babel/plugins/next-page-config.ts b/packages/next/build/babel/plugins/next-page-config.ts
@@ -144,10 +144,13 @@ export default function nextPageConfig({
                     continue
                   }
 
-                  if (!BabelTypes.isObjectExpression(declaration.init)) {
-                    const got = declaration.init
-                      ? declaration.init.type
-                      : 'undefined'
+                  let { init } = declaration
+                  if (BabelTypes.isTSAsExpression(init)) {
+                    init = init.expression
+                  }
+
+                  if (!BabelTypes.isObjectExpression(init)) {
+                    const got = init ? init.type : 'undefined'
                     throw new Error(
                       errorMessage(
                         exportState,
@@ -156,7 +159,7 @@ export default function nextPageConfig({
                     )
                   }
 
-                  for (const prop of declaration.init.properties) {
+                  for (const prop of init.properties) {
                     if (BabelTypes.isSpreadElement(prop)) {
                       throw new Error(
                         errorMessage(

diff --git a/test/production/typescript-basic/app/pages/page-config.tsx b/test/production/typescript-basic/app/pages/page-config.tsx
@@ -0,0 +1,17 @@
+import Link from 'next/link'
+import { PageConfig } from 'next'
+
+export const config: PageConfig = {
+  unstable_runtimeJS: false,
+}
+
+export default function Page() {
+  return (
+    <>
+      <p>hello world</p>
+      <Link href="/another">
+        <a>to /another</a>
+      </Link>
+    </>
+  )
+}
diff --git a/test/unit/babel-plugin-next-page-config.test.ts b/test/unit/babel-plugin-next-page-config.test.ts
@@ -0,0 +1,62 @@
+/* eslint-env jest */
+import { transformSync } from '@babel/core'
+
+const babel = (code) =>
+  transformSync(code, {
+    filename: 'page.tsx',
+    presets: ['@babel/preset-typescript'],
+    plugins: [require('next/dist/build/babel/plugins/next-page-config')],
+    babelrc: false,
+    configFile: false,
+    sourceType: 'module',
+    compact: true,
+    caller: {
+      name: 'tests',
+      isDev: false,
+    },
+  } as any).code
+
+describe('babel plugin (next-page-config)', () => {
+  test('export config with type annotation', () => {
+    const output = babel('export const config: PageConfig = {};')
+
+    expect(output).toMatch(`export const config={};`)
+  })
+
+  test('export config with AsExpression', () => {
+    const output = babel('export const config = {} as PageConfig;')
+
+    expect(output).toMatch('export const config={};')
+  })
+
+  test('amp enabled', () => {
+    jest.spyOn(Date, 'now').mockReturnValue(1234)
+    const output = babel(`
+      export const config = { amp: true }
+
+      function About(props) {
+        return <h3>My AMP About Page!</h3>
+      }
+      
+      export default About`)
+
+    expect(output).toMatch(
+      'const __NEXT_DROP_CLIENT_FILE__="__NEXT_DROP_CLIENT_FILE__ 1234";'
+    )
+  })
+
+  test('amp hybrid enabled', () => {
+    const output = babel(`
+      export const config = { amp: 'hybrid' }
+
+      function About(props) {
+        return <h3>My AMP About Page!</h3>
+      }
+      
+      export default About`)
+
+    expect(output).toMatch(
+      "export const config={amp:'hybrid'};function About(props){return<h3>My AMP About Page!</h3>;}export default About;"
+    )
+  })
+})