vercel · timneutkens · Apr 17, 2024 · Apr 15, 2024 · Apr 16, 2024 · Apr 16, 2024
@@ -42,3 +42,4 @@ test/development/basic/hmr/components/parse-error.js
 packages/next-swc/docs/assets/**/*
 test/lib/amp-validator-wasm.js
 test/production/pages-dir/production/fixture/amp-validator-wasm.js
+test/e2e/async-modules/amp-validator-wasm.js
@@ -39,3 +39,4 @@ bench/nested-deps/components/**/*
 **/.tina/__generated__/**
 test/lib/amp-validator-wasm.js
 test/production/pages-dir/production/fixture/amp-validator-wasm.js
+test/e2e/async-modules/amp-validator-wasm.js
@@ -18,7 +18,7 @@ export const base = curry(function base(
     ? 'node18.17' // Same version defined in packages/next/package.json#engines
     : ctx.isEdgeRuntime
     ? ['web', 'es6']
-    : ['web', 'es5']
+    : ['web', 'es6']
 
   // https://webpack.js.org/configuration/devtool/#development
   if (ctx.isDevelopment) {

@@ -9,7 +9,7 @@ import * as Log from '../../build/output/log'
 
 type DesiredCompilerOptionsShape = {
   [K in keyof CompilerOptions]:
-    | { suggested: any }
+    | { suggested: any; reason?: string }
     | {
         parsedValue?: any
         parsedValues?: Array<any>
@@ -23,6 +23,11 @@ function getDesiredCompilerOptions(
   tsOptions?: CompilerOptions
 ): DesiredCompilerOptionsShape {
   const o: DesiredCompilerOptionsShape = {
+    target: {
+      suggested: 'ES2017',
+      reason:
+        'For top-level `await`. Note: Next.js only polyfills for the esmodules target.',
+    },
     // These are suggested values and will be set when not present in the
     // tsconfig.json
     lib: { suggested: ['dom', 'dom.iterable', 'esnext'] },
@@ -168,7 +173,12 @@ export async function writeConfigurationDefaults(
         }
         userTsConfig.compilerOptions[optionKey] = check.suggested
         suggestedActions.push(
-          cyan(optionKey) + ' was set to ' + bold(check.suggested)
+          cyan(optionKey) +
+            ' was set to ' +
+            bold(check.suggested) +
+            check.reason
+            ? ` (${check.reason})`
+            : ''
         )
       }
     } else if ('value' in check) {

@@ -0,0 +1,6 @@
+'use client'
+const appValue = await Promise.resolve('hello')
+
+export default function Page() {
+  return <p id="app-router-client-component-value">{appValue}</p>
+}
@@ -0,0 +1,5 @@
+const appValue = await Promise.resolve('hello')
+
+export default function Page() {
+  return <p id="app-router-value">{appValue}</p>
+}
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
@@ -0,0 +1,21 @@
+/* eslint-env jest */
+import { nextTestSetup } from 'e2e-utils'
+
+describe('Async modules', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+  it('app router server component async module', async () => {
+    const browser = await next.browser('/app-router')
+    expect(await browser.elementByCss('#app-router-value').text()).toBe('hello')
+  })
+
+  // TODO: Investigate/fix issue with React loading async modules failing.
+  // Rename app/app-router/client-component/skipped-page.tsx to app/app-router/client-component/page.tsx to run this test.
+  it.skip('app router client component async module', async () => {
+    const browser = await next.browser('/app-router/client')
+    expect(
+      await browser.elementByCss('#app-router-client-component-value').text()
+    ).toBe('hello')
+  })
+})
@@ -0,0 +1 @@
+module.exports = {}
@@ -0,0 +1,60 @@
+/* eslint-env jest */
+import { nextTestSetup } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+describe('Async modules', () => {
+  const { next, isNextDev: dev } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('ssr async page modules', async () => {
+    const $ = await next.render$('/')
+    expect($('#app-value').text()).toBe('hello')
+    expect($('#page-value').text()).toBe('42')
+  })
+
+  it('csr async page modules', async () => {
+    const browser = await next.browser('/')
+    expect(await browser.elementByCss('#app-value').text()).toBe('hello')
+    expect(await browser.elementByCss('#page-value').text()).toBe('42')
+    expect(await browser.elementByCss('#doc-value').text()).toBe('doc value')
+  })
+
+  it('works on async api routes', async () => {
+    const res = await next.fetch('/api/hello')
+    expect(res.status).toBe(200)
+    const result = await res.json()
+    expect(result).toHaveProperty('value', 42)
+  })
+
+  it('works with getServerSideProps', async () => {
+    const browser = await next.browser('/gssp')
+    expect(await browser.elementByCss('#gssp-value').text()).toBe('42')
+  })
+
+  it('works with getStaticProps', async () => {
+    const browser = await next.browser('/gsp')
+    expect(await browser.elementByCss('#gsp-value').text()).toBe('42')
+  })
+
+  it('can render async 404 pages', async () => {
+    const browser = await next.browser('/dhiuhefoiahjeoij')
+    expect(await browser.elementByCss('#content-404').text()).toBe("hi y'all")
+  })
+
+  // TODO: investigate this test flaking
+  it.skip('can render async AMP pages', async () => {
+    const browser = await next.browser('/config')
+    await check(
+      () => browser.elementByCss('#amp-timeago').text(),
+      'just now',
+      true
+    )
+  })
+  ;(dev ? it.skip : it)('can render async error page', async () => {
+    const browser = await next.browser('/make-error')
+    expect(await browser.elementByCss('#content-error').text()).toBe(
+      'hello error'
+    )
+  })
+})
@@ -0,0 +1,7 @@
+module.exports = {
+  experimental: {
+    amp: {
+      validator: require.resolve('./amp-validator-wasm.js'),
+    },
+  },
+}
@@ -37,6 +37,7 @@ describe('tsconfig module: preserve', () => {
       "{
         "compilerOptions": {
           "module": "preserve",
+          "target": "ES2017",
           "lib": [
             "dom",
             "dom.iterable",