first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/test/development/basic/next-dynamic/components/esm.mjs
+++ b/test/development/basic/next-dynamic/components/esm.mjs
@@ -0,0 +1,7 @@
+import React from 'react'
+
+window.ua = navigator.userAgent
+
+export default function Component() {
+  return <p>esm.mjs</p>
+}
--- a/test/development/basic/next-dynamic/components/hello-chunkfilename.js
+++ b/test/development/basic/next-dynamic/components/hello-chunkfilename.js
@@ -0,0 +1 @@
+export default () => <div>test chunkfilename</div>
--- a/test/development/basic/next-dynamic/components/hello-context.js
+++ b/test/development/basic/next-dynamic/components/hello-context.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class extends React.Component {
+  static contextTypes = {
+    data: PropTypes.object,
+  }
+
+  render() {
+    const { data } = this.context
+    return <div>{data.title}</div>
+  }
+}
--- a/test/development/basic/next-dynamic/components/hello1.js
+++ b/test/development/basic/next-dynamic/components/hello1.js
@@ -0,0 +1 @@
+export default () => <p>Hello World 1</p>
--- a/test/development/basic/next-dynamic/components/hello2.js
+++ b/test/development/basic/next-dynamic/components/hello2.js
@@ -0,0 +1 @@
+export default () => <p>Hello World 2</p>
--- a/test/development/basic/next-dynamic/components/hello3.js
+++ b/test/development/basic/next-dynamic/components/hello3.js
@@ -0,0 +1 @@
+export default () => <p>Hello World 1</p>
--- a/test/development/basic/next-dynamic/components/hello4.js
+++ b/test/development/basic/next-dynamic/components/hello4.js
@@ -0,0 +1 @@
+export default () => <p>Hello World 2</p>
--- a/test/development/basic/next-dynamic/components/nested1.js
+++ b/test/development/basic/next-dynamic/components/nested1.js
@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic'
+
+const Nested2 = dynamic(() => import('./nested2'))
+
+export default () => (
+  <div>
+    Nested 1
+    <Nested2 />
+  </div>
+)
--- a/test/development/basic/next-dynamic/components/nested2.js
+++ b/test/development/basic/next-dynamic/components/nested2.js
@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic'
+
+const BrowserLoaded = dynamic(async () => () => <div>Browser hydrated</div>, {
+  ssr: false,
+})
+
+export default () => (
+  <div>
+    <div>Nested 2</div>
+    <BrowserLoaded />
+  </div>
+)
--- a/test/development/basic/next-dynamic/components/pure-client.js
+++ b/test/development/basic/next-dynamic/components/pure-client.js
@@ -0,0 +1,5 @@
+window.ua = navigator.userAgent
+
+export default function PureClient() {
+  return <p id="pure-client">navigator</p>
+}
--- a/test/development/basic/next-dynamic/components/welcome.js
+++ b/test/development/basic/next-dynamic/components/welcome.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default class Welcome extends React.Component {
+  state = { name: null }
+
+  componentDidMount() {
+    const { name } = this.props
+    this.setState({ name })
+  }
+
+  render() {
+    const { name } = this.state
+    if (!name) return null
+
+    return <p>Welcome, {name}</p>
+  }
+}
--- a/test/development/basic/next-dynamic/next-dynamic-babel-src-dir.test.ts
+++ b/test/development/basic/next-dynamic/next-dynamic-babel-src-dir.test.ts
@@ -0,0 +1,3 @@
+process.env.TEST_BABEL = '1'
+process.env.TEST_SRC_DIR = '1'
+require('./next-dynamic.test')
--- a/test/development/basic/next-dynamic/next-dynamic-babel.test.ts
+++ b/test/development/basic/next-dynamic/next-dynamic-babel.test.ts
@@ -0,0 +1,2 @@
+process.env.TEST_BABEL = '1'
+require('./next-dynamic.test')
--- a/test/development/basic/next-dynamic/next-dynamic-base-path.test.ts
+++ b/test/development/basic/next-dynamic/next-dynamic-base-path.test.ts
@@ -0,0 +1,2 @@
+process.env.TEST_BASE_PATH = '/docs'
+require('./next-dynamic.test')
--- a/test/development/basic/next-dynamic/next-dynamic-custom-document.test.ts
+++ b/test/development/basic/next-dynamic/next-dynamic-custom-document.test.ts
@@ -0,0 +1,2 @@
+process.env.TEST_CUSTOMIZED_DOCUMENT = '1'
+require('./next-dynamic.test')
--- a/test/development/basic/next-dynamic/next-dynamic.test.ts
+++ b/test/development/basic/next-dynamic/next-dynamic.test.ts
@@ -0,0 +1,325 @@
+import { join } from 'path'
+import cheerio from 'cheerio'
+import webdriver from 'next-webdriver'
+import { createNext, FileRef } from 'e2e-utils'
+import { waitForNoRedbox, renderViaHTTP, check } from 'next-test-utils'
+import { NextInstance } from 'e2e-utils'
+
+const customDocumentGipContent = `\
+import { Html, Main, NextScript, Head } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+
+Document.getInitialProps = (ctx) => {
+  return ctx.defaultGetInitialProps(ctx)
+}
+`
+
+const basePath = process.env.TEST_BASE_PATH || ''
+const srcPrefix = process.env.TEST_SRC_DIR ? 'src/' : ''
+
+describe('next/dynamic', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        [`${srcPrefix}/components`]: new FileRef(join(__dirname, 'components')),
+        [`${srcPrefix}/pages`]: new FileRef(join(__dirname, 'pages')),
+        ...(process.env.TEST_CUSTOMIZED_DOCUMENT === '1' && {
+          [`${srcPrefix}/pages/_document.js`]: customDocumentGipContent,
+        }),
+        // When it's not turbopack and babel is enabled, we add a .babelrc file.
+        ...(!process.env.IS_TURBOPACK_TEST &&
+          process.env.TEST_BABEL === '1' && {
+            '.babelrc': `{ "presets": ["next/babel"] }`,
+          }),
+      },
+      nextConfig: {
+        basePath,
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  async function get$(path, query?: any) {
+    const html = await renderViaHTTP(next.url, path, query)
+    return cheerio.load(html)
+  }
+
+  // Turbopack doesn't support babel.
+  ;(process.env.IS_TURBOPACK_TEST && process.env.TEST_BABEL === '1'
+    ? describe.skip
+    : describe)('Dynamic import', () => {
+    describe('default behavior', () => {
+      it('should render dynamic import components', async () => {
+        const $ = await get$(basePath + '/dynamic/ssr')
+        // Make sure the client side knows it has to wait for the bundle
+        expect(JSON.parse($('#__NEXT_DATA__').html()).dynamicIds).toContain(
+          process.env.IS_TURBOPACK_TEST
+            ? '[project]/components/hello1.js [client] (ecmascript, next/dynamic entry)'
+            : 'pages/dynamic/ssr.js -> ../../components/hello1'
+        )
+        expect($('body').text()).toMatch(/Hello World 1/)
+      })
+
+      it('should render dynamic import components using a function as first parameter', async () => {
+        const $ = await get$(basePath + '/dynamic/function')
+        // Make sure the client side knows it has to wait for the bundle
+        expect(JSON.parse($('#__NEXT_DATA__').html()).dynamicIds).toContain(
+          process.env.IS_TURBOPACK_TEST
+            ? '[project]/components/hello1.js [client] (ecmascript, next/dynamic entry)'
+            : 'pages/dynamic/function.js -> ../../components/hello1'
+        )
+        expect($('body').text()).toMatch(/Hello World 1/)
+      })
+
+      it('should render even there are no physical chunk exists', async () => {
+        let browser
+        try {
+          browser = await webdriver(next.url, basePath + '/dynamic/no-chunk')
+          await check(
+            () => browser.elementByCss('body').text(),
+            /Welcome, normal/
+          )
+          await check(
+            () => browser.elementByCss('body').text(),
+            /Welcome, dynamic/
+          )
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+
+      it('should SSR nested dynamic components and skip nonSSR ones', async () => {
+        const $ = await get$(basePath + '/dynamic/nested')
+        const text = $('#__next').text()
+        expect(text).toContain('Nested 1')
+        expect(text).toContain('Nested 2')
+        expect(text).not.toContain('Browser hydrated')
+      })
+
+      it('should hydrate nested chunks', async () => {
+        let browser
+        try {
+          browser = await webdriver(next.url, basePath + '/dynamic/nested')
+          await check(() => browser.elementByCss('body').text(), /Nested 1/)
+          await check(() => browser.elementByCss('body').text(), /Nested 2/)
+          await check(
+            () => browser.elementByCss('body').text(),
+            /Browser hydrated/
+          )
+
+          if ((global as any).browserName === 'chrome') {
+            const logs = await browser.log()
+
+            logs.forEach((logItem) => {
+              expect(logItem.message).not.toMatch(
+                /Expected server HTML to contain/
+              )
+            })
+          }
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+
+      it('should render the component Head content', async () => {
+        let browser
+        try {
+          browser = await webdriver(next.url, basePath + '/dynamic/head')
+          await check(() => browser.elementByCss('body').text(), /test/)
+          const backgroundColor = await browser
+            .elementByCss('.dynamic-style')
+            .getComputedCss('background-color')
+          const height = await browser
+            .elementByCss('.dynamic-style')
+            .getComputedCss('height')
+          expect(height).toBe('200px')
+          expect(backgroundColor).toMatch(/rgba?\(0, 128, 0/)
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+    })
+    describe('ssr:false option', () => {
+      it('should not render loading on the server side', async () => {
+        const $ = await get$(basePath + '/dynamic/no-ssr')
+        expect($('body').html()).not.toContain('"dynamicIds"')
+        expect($('body').text()).not.toMatch('loading...')
+      })
+
+      it('should render the component on client side', async () => {
+        let browser
+        try {
+          browser = await webdriver(next.url, basePath + '/dynamic/no-ssr')
+          await check(() => browser.elementByCss('body').text(), /navigator/)
+          await waitForNoRedbox(browser)
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+
+      it('should import and render the ESM module correctly on client side', async () => {
+        let browser
+        try {
+          browser = await webdriver(next.url, basePath + '/dynamic/no-ssr-esm')
+          await check(() => browser.elementByCss('body').text(), /esm.mjs/)
+          await waitForNoRedbox(browser)
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+    })
+
+    describe('ssr:true option', () => {
+      it('Should render the component on the server side', async () => {
+        const $ = await get$(basePath + '/dynamic/ssr-true')
+        expect($('body').html()).toContain('"dynamicIds"')
+        expect($('p').text()).toBe('Hello World 1')
+      })
+
+      it('should render the component on client side', async () => {
+        let browser
+        try {
+          browser = await webdriver(next.url, basePath + '/dynamic/ssr-true')
+          await check(
+            () => browser.elementByCss('body').text(),
+            /Hello World 1/
+          )
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+
+      if (!(global as any).isNextDev) {
+        it('should not include ssr:false imports to server trace', async () => {
+          const trace = JSON.parse(
+            await next.readFile('.next/server/pages/dynamic/no-ssr.js.nft.json')
+          ) as { files: string[] }
+          expect(trace).not.toContain('navigator')
+        })
+      }
+    })
+    // Turbopack doesn't have this feature.
+    ;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
+      'custom chunkfilename',
+      () => {
+        it('should render the correct filename', async () => {
+          const $ = await get$(basePath + '/dynamic/chunkfilename')
+          expect($('body').text()).toMatch(/test chunkfilename/)
+          expect($('html').html()).toMatch(/hello-world\.js/)
+        })
+
+        it('should render the component on client side', async () => {
+          let browser
+          try {
+            browser = await webdriver(
+              next.url,
+              basePath + '/dynamic/chunkfilename'
+            )
+            await check(
+              () => browser.elementByCss('body').text(),
+              /test chunkfilename/
+            )
+          } finally {
+            if (browser) {
+              await browser.close()
+            }
+          }
+        })
+      }
+    )
+
+    describe('custom loading', () => {
+      it('should render custom loading on the server side when `ssr:false` and `loading` is provided', async () => {
+        const $ = await get$(basePath + '/dynamic/no-ssr-custom-loading')
+        expect($('p').text()).toBe('LOADING')
+      })
+
+      it('should render the component on client side', async () => {
+        let browser
+        try {
+          browser = await webdriver(
+            next.url,
+            basePath + '/dynamic/no-ssr-custom-loading'
+          )
+          await check(
+            () => browser.elementByCss('body').text(),
+            /Hello World 1/
+          )
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+    })
+
+    // TODO: Make this test work with Turbopack. Currently the test relies on `chunkFileName` which is not supported by Turbopack.
+    ;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
+      'Multiple modules',
+      () => {
+        it('should only include the rendered module script tag', async () => {
+          const $ = await get$(basePath + '/dynamic/multiple-modules')
+          const html = $('html').html()
+          expect(html).toMatch(/hello1\.js/)
+          expect(html).not.toMatch(/hello2\.js/)
+        })
+
+        it('should only load the rendered module in the browser', async () => {
+          let browser
+          try {
+            browser = await webdriver(
+              next.url,
+              basePath + '/dynamic/multiple-modules'
+            )
+            const html = await browser.eval(
+              'document.documentElement.innerHTML'
+            )
+            expect(html).toMatch(/hello1\.js/)
+            expect(html).not.toMatch(/hello2\.js/)
+          } finally {
+            if (browser) {
+              await browser.close()
+            }
+          }
+        })
+
+        it('should only render one bundle if component is used multiple times', async () => {
+          const $ = await get$(basePath + '/dynamic/multiple-modules')
+          const html = $('html').html()
+          try {
+            expect(html.match(/chunks[\\/]hello1\.js/g).length).toBe(1)
+            expect(html).not.toMatch(/hello2\.js/)
+          } catch (err) {
+            console.error(html)
+            throw err
+          }
+        })
+      }
+    )
+  })
+})
--- a/test/development/basic/next-dynamic/pages/dynamic/chunkfilename.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/chunkfilename.js
@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(
+  import(
+    /* webpackChunkName: 'hello-world' */ '../../components/hello-chunkfilename'
+  )
+)
+
+export default Hello
--- a/test/development/basic/next-dynamic/pages/dynamic/function.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/function.js
@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(() => import('../../components/hello1'))
+
+export default Hello
--- a/test/development/basic/next-dynamic/pages/dynamic/head.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/head.js
@@ -0,0 +1,30 @@
+import dynamic from 'next/dynamic'
+import Head from 'next/head'
+
+const Test = dynamic({
+  loader: async () => {
+    // component
+    return () => {
+      return (
+        <div className="dynamic-style">
+          <Head>
+            <style
+              dangerouslySetInnerHTML={{
+                __html: `
+            .dynamic-style {
+              background-color: green;
+              height: 200px;
+            }
+          `,
+              }}
+            />
+          </Head>
+          test
+        </div>
+      )
+    }
+  },
+  ssr: false,
+})
+
+export default Test
--- a/test/development/basic/next-dynamic/pages/dynamic/index.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/index.js
@@ -0,0 +1,7 @@
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <Link href="/dynamic/no-chunk">No Chunk</Link>
+  </div>
+)
--- a/test/development/basic/next-dynamic/pages/dynamic/multiple-modules.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/multiple-modules.js
@@ -0,0 +1,23 @@
+/* eslint-disable */
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(
+  import(/* webpackChunkName: 'hello1' */ '../../components/hello3')
+)
+const Hello2 = dynamic(
+  import(/* webpackChunkName: 'hello2' */ '../../components/hello4')
+)
+
+export default () => {
+  return (
+    <div>
+      <Hello />
+      <Hello />
+      <Hello />
+      <Hello />
+      <Hello />
+      <Hello />
+      <Hello />
+    </div>
+  )
+}
--- a/test/development/basic/next-dynamic/pages/dynamic/nested.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/nested.js
@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(() => import('../../components/nested1'))
+
+export default DynamicComponent
--- a/test/development/basic/next-dynamic/pages/dynamic/no-chunk.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/no-chunk.js
@@ -0,0 +1,11 @@
+import dynamic from 'next/dynamic'
+import Welcome from '../../components/welcome'
+
+const Welcome2 = dynamic(import('../../components/welcome'))
+
+export default () => (
+  <div>
+    <Welcome name="normal" />
+    <Welcome2 name="dynamic" />
+  </div>
+)
--- a/test/development/basic/next-dynamic/pages/dynamic/no-ssr-custom-loading.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/no-ssr-custom-loading.js
@@ -0,0 +1,8 @@
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(import('../../components/hello1'), {
+  ssr: false,
+  loading: () => <p>LOADING</p>,
+})
+
+export default Hello
--- a/test/development/basic/next-dynamic/pages/dynamic/no-ssr-esm.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/no-ssr-esm.js
@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const Page = dynamic(() => import('../../components/esm.mjs'), { ssr: false })
+
+export default Page
--- a/test/development/basic/next-dynamic/pages/dynamic/no-ssr.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/no-ssr.js
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const PureClient = dynamic(import('../../components/pure-client'), {
+  ssr: false,
+})
+
+export default PureClient
--- a/test/development/basic/next-dynamic/pages/dynamic/ssr-true.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/ssr-true.js
@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(import('../../components/hello1'), { ssr: true })
+
+export default Hello
--- a/test/development/basic/next-dynamic/pages/dynamic/ssr.js
+++ b/test/development/basic/next-dynamic/pages/dynamic/ssr.js
@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(import('../../components/hello1'))
+
+export default Hello
				`@@ -0,0 +1 @@`
				`export default () => <div>test chunkfilename</div>`