fix(#36435): apply correct fix (#36464)

* fix(#36435): apply correct fix * fix: only apply interop default flag for re-exported I really, really love glob. * test: add test cases for next/dynamic and next/amp
vercel · Apr 26, 2022 · 487f7ab · 487f7ab
1 parent e97a648
commit 487f7ab
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/packages/next/head.js b/packages/next/head.js
@@ -1,3 +1 @@
-var head = require('./dist/shared/lib/head')
-Object.assign(head.default, head)
-module.exports = head.default
+module.exports = require('./dist/shared/lib/head')
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
@@ -1778,6 +1778,7 @@ export async function compile(task, opts) {
       'telemetry',
       'trace',
       'shared',
+      'shared_re_exported',
       'server_wasm',
       // we compile this each time so that fresh runtime data is pulled
       // before each publish
@@ -1916,18 +1917,39 @@ export default async function (task) {
   await task.watch('cli/**/*.+(js|ts|tsx)', 'cli', opts)
   await task.watch('telemetry/**/*.+(js|ts|tsx)', 'telemetry', opts)
   await task.watch('trace/**/*.+(js|ts|tsx)', 'trace', opts)
-  await task.watch('shared/**/*.+(js|ts|tsx)', 'shared', opts)
+  await task.watch(
+    'shared/lib/{amp,config,constants,dynamic,head}.+(js|ts|tsx)',
+    'shared_re_exported',
+    opts
+  )
+  await task.watch(
+    'shared/**/!(amp|config|constants|dynamic|head).+(js|ts|tsx)',
+    'shared',
+    opts
+  )
   await task.watch('server/**/*.+(wasm)', 'server_wasm', opts)
 }
 
 export async function shared(task, opts) {
   await task
-    .source(opts.src || 'shared/**/*.+(js|ts|tsx)')
+    .source(
+      opts.src || 'shared/**/!(amp|config|constants|dynamic|head).+(js|ts|tsx)'
+    )
     .swc('server', { dev: opts.dev })
     .target('dist/shared')
   notify('Compiled shared files')
 }
 
+export async function shared_re_exported(task, opts) {
+  await task
+    .source(
+      opts.src || 'shared/**/{amp,config,constants,dynamic,head}.+(js|ts|tsx)'
+    )
+    .swc('server', { dev: opts.dev, interopClientDefaultExport: true })
+    .target('dist/shared')
+  notify('Compiled shared re-exported files')
+}
+
 export async function server_wasm(task, opts) {
   await task.source(opts.src || 'server/**/*.+(wasm)').target('dist/server')
   notify('Moved server wasm files')

diff --git a/test/e2e/type-module-interop/index.test.ts b/test/e2e/type-module-interop/index.test.ts
@@ -14,8 +14,13 @@ describe('Type module interop', () => {
           import Link from 'next/link'
           import Head from 'next/head'
           import Script from 'next/script'
+          import dynamic from 'next/dynamic'
+          import { useAmp } from 'next/amp'
 
-          export default function Page() { 
+          const Dynamic = dynamic(() => import('../components/example'))
+
+          export default function Page() {
+            const isAmp = useAmp()
             return (
               <>
                 <Head>
@@ -30,6 +35,8 @@ describe('Type module interop', () => {
                   }}
                 />
                 <p>hello world</p>
+                <Dynamic />
+                <p id="isAmp">isAmp: {isAmp ? 'yes' : 'false'}</p>
                 <Link href="/modules">
                   <a id="link-to-module">link to module</a>
                 </Link>
@@ -52,6 +59,11 @@ describe('Type module interop', () => {
             )
           }
         `,
+        'components/example.jsx': `
+          export default function Example() {
+            return <p>An example components load via next/dynamic</p>
+          }
+        `,
       },
       dependencies: {},
     })
@@ -74,6 +86,11 @@ describe('Type module interop', () => {
   it('should render server-side', async () => {
     const html = await renderViaHTTP(next.url, '/')
     expect(html).toContain('hello world')
+    // component load via next/dynamic should rendered on the server side
+    expect(html).toContain('An example components load via next/dynamic')
+    // imported next/amp should work on the server side
+    const $ = cheerio.load(html)
+    expect($('#isAmp').text()).toContain('false')
   })
 
   it('should render client-side', async () => {