diff --git a/test/e2e/pages-dir/css-module/next-dynamic.test.ts b/test/e2e/pages-dir/css-module/next-dynamic.test.ts
index 2b54a0eaac5ab..7828eb56ae62a 100644
--- a/test/e2e/pages-dir/css-module/next-dynamic.test.ts
+++ b/test/e2e/pages-dir/css-module/next-dynamic.test.ts
@@ -19,9 +19,7 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
const buttonBgColor = await browser.eval(
`window.getComputedStyle(document.querySelector('button')).backgroundColor`
)
- // not gray
- expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
- // but red
+ // red
expect(buttonBgColor).toBe('rgb(255, 0, 0)')
})
@@ -38,9 +36,41 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
const buttonBgColor = await browser.eval(
`window.getComputedStyle(document.querySelector('button')).backgroundColor`
)
- // not gray
- expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
- // but red
+ // red
+ expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+ })
+
+ it('should not remove style when navigating from static imported component to on demand next/dynamic', async () => {
+ const browser = await next.browser('/next-dynamic/nodejs')
+ expect(
+ await browser
+ .elementByCss('a[href="/next-dynamic/on-demand"]')
+ .click()
+ .waitForElementByCss('#red-button')
+ .text()
+ ).toBe('My background should be red!')
+
+ const buttonBgColor = await browser.eval(
+ `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+ )
+ // red
+ expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+ })
+
+ it('should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic', async () => {
+ const browser = await next.browser('/next-dynamic/nodejs/on-demand')
+ expect(
+ await browser
+ .elementByCss('a[href="/next-dynamic/on-demand"]')
+ .click()
+ .waitForElementByCss('#red-button')
+ .text()
+ ).toBe('My background should be red!')
+
+ const buttonBgColor = await browser.eval(
+ `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+ )
+ // red
expect(buttonBgColor).toBe('rgb(255, 0, 0)')
})
})
@@ -59,9 +89,7 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
const buttonBgColor = await browser.eval(
`window.getComputedStyle(document.querySelector('button')).backgroundColor`
)
- // not gray
- expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
- // but red
+ // red
expect(buttonBgColor).toBe('rgb(255, 0, 0)')
})
@@ -78,9 +106,41 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
const buttonBgColor = await browser.eval(
`window.getComputedStyle(document.querySelector('button')).backgroundColor`
)
- // not gray
- expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
- // but red
+ // red
+ expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+ })
+
+ it('should not remove style when navigating from static imported component to on demand next/dynamic', async () => {
+ const browser = await next.browser('/next-dynamic/edge')
+ expect(
+ await browser
+ .elementByCss('a[href="/next-dynamic/on-demand"]')
+ .click()
+ .waitForElementByCss('#red-button')
+ .text()
+ ).toBe('My background should be red!')
+
+ const buttonBgColor = await browser.eval(
+ `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+ )
+ // red
+ expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+ })
+
+ it('should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic', async () => {
+ const browser = await next.browser('/next-dynamic/edge/on-demand')
+ expect(
+ await browser
+ .elementByCss('a[href="/next-dynamic/on-demand"]')
+ .click()
+ .waitForElementByCss('#red-button')
+ .text()
+ ).toBe('My background should be red!')
+
+ const buttonBgColor = await browser.eval(
+ `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+ )
+ // red
expect(buttonBgColor).toBe('rgb(255, 0, 0)')
})
})
diff --git a/test/e2e/pages-dir/css-module/pages/index.tsx b/test/e2e/pages-dir/css-module/pages/index.tsx
new file mode 100644
index 0000000000000..f538499b3aaa6
--- /dev/null
+++ b/test/e2e/pages-dir/css-module/pages/index.tsx
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function Home() {
+ return (
+
+ /next-dynamic/nodejs
+ /next-dynamic/edge
+ /dynamic-import/nodejs
+ /dynamic-import/edge
+
+ )
+}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/edge.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/index.tsx
similarity index 67%
rename from test/e2e/pages-dir/css-module/pages/next-dynamic/edge.tsx
rename to test/e2e/pages-dir/css-module/pages/next-dynamic/edge/index.tsx
index 3d7d725215af9..b8054edfce6d3 100644
--- a/test/e2e/pages-dir/css-module/pages/next-dynamic/edge.tsx
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/index.tsx
@@ -1,15 +1,22 @@
import Link from 'next/link'
-import { RedButton } from '../../components/red-button'
+import { RedButton } from '../../../components/red-button'
export default function Home() {
return (
- <>
+
/next-dynamic/basic
/next-dynamic/ssr-false
/next-dynamic/on-demand
{/* RedButton should be imported to reproduce the issue */}
- >
+
)
}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx
new file mode 100644
index 0000000000000..00110db1ab941
--- /dev/null
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx
@@ -0,0 +1,37 @@
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { RedButton } from '../../../components/red-button'
+
+const NextDynamicRedButton = dynamic(
+ () =>
+ import('../../../components/red-button').then((module) => module.RedButton),
+ { ssr: false }
+)
+
+export default function Home() {
+ const [button, setButton] = useState()
+ const handleClick = () => {
+ setButton()
+ }
+
+ return (
+
+ /next-dynamic/on-demand
+
+
+ {button}
+
+ )
+}
+
+export const config = {
+ runtime: 'experimental-edge',
+}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/index.tsx
similarity index 64%
rename from test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs.tsx
rename to test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/index.tsx
index 894362e5aef80..26bbd15b56c72 100644
--- a/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs.tsx
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/index.tsx
@@ -1,14 +1,21 @@
import Link from 'next/link'
-import { RedButton } from '../../components/red-button'
+import { RedButton } from '../../../components/red-button'
export default function Home() {
return (
- <>
+
/next-dynamic/basic
/next-dynamic/ssr-false
/next-dynamic/on-demand
{/* RedButton should be imported to reproduce the issue */}
- >
+
)
}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx
new file mode 100644
index 0000000000000..d564ee085fb81
--- /dev/null
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { RedButton } from '../../../components/red-button'
+
+const NextDynamicRedButton = dynamic(
+ () =>
+ import('../../../components/red-button').then((module) => module.RedButton),
+ { ssr: false }
+)
+
+export default function Home() {
+ const [button, setButton] = useState()
+ const handleClick = () => {
+ setButton()
+ }
+
+ return (
+
+ /next-dynamic/on-demand
+
+
+ {button}
+
+ )
+}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx
index 35be0c8c3e6a3..05d1a3e9fe44a 100644
--- a/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
import dynamic from 'next/dynamic'
import { useState } from 'react'
@@ -7,20 +8,24 @@ const NextDynamicRedButton = dynamic(
{ ssr: false }
)
-export default function NextDynamic() {
- const [showRedButton, setShowRedButton] = useState(false)
-
+export default function Home() {
+ const [button, setButton] = useState()
const handleClick = () => {
- setShowRedButton(true)
+ setButton()
}
return (
- <>
- {showRedButton ? (
-
- ) : (
-
- )}
- >
+
+ /
+
+ {button}
+
)
}