fix(pages-dir): cannot load the same css module with both import and next/dynamic

test/e2e/pages-dir/css-module/components/red-button-lazy.tsx

@@ -0,0 +1,7 @@
+import { useLoadOnClientSide } from './useLoadOnClientSide'
+const loader = () => import('./red-button').then(({ RedButton }) => RedButton)
+
+export function RedButtonLazy() {
+  const RedButton = useLoadOnClientSide(loader, null)
+  return RedButton && <RedButton />
+}

test/e2e/pages-dir/css-module/components/red-button.tsx

@@ -0,0 +1,9 @@
+import classes from './red.module.css'
+
+export function RedButton() {
+  return (
+    <button id="red-button" className={classes.button}>
+      My background should be red!
+    </button>
+  )
+}

test/e2e/pages-dir/css-module/components/red.module.css

@@ -0,0 +1,3 @@
+.button {
+  background-color: rgb(255, 0, 0);
+}

test/e2e/pages-dir/css-module/components/useLoadOnClientSide.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+const empty = {}
+
+export const useLoadOnClientSide = (loader, fallback) => {
+  const [lazyModule, setLazyModule] = useState(empty)
+  const skip = lazyModule !== empty
+
+  useEffect(() => {
+    if (skip || typeof document === 'undefined') {
+      return
+    }
+
+    let mounted = true
+    loader().then((mod) => {
+      if (!mounted) return
+      setLazyModule(() => mod)
+    })
+
+    return () => {
+      mounted = false
+    }
+  }, [skip, loader])
+
+  return lazyModule === empty ? fallback : lazyModule
+}

test/e2e/pages-dir/css-module/dynamic-import.test.ts

@@ -0,0 +1,49 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  describe('nodejs', () => {
+    it('should not remove style when navigating from static imported component to dynamic import', async () => {
+      const browser = await next.browser('/dynamic-import/nodejs')
+      expect(
+        await browser
+          .elementByCss('a[href="/dynamic-import/basic"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // not gray
+      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
+      // but red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+  })
+
+  describe('edge', () => {
+    it('should not remove style when navigating from static imported component to dynamic import', async () => {
+      const browser = await next.browser('/dynamic-import/edge')
+      expect(
+        await browser
+          .elementByCss('a[href="/dynamic-import/basic"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // not gray
+      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
+      // but red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+  })
+})

test/e2e/pages-dir/css-module/next-dynamic.test.ts

@@ -0,0 +1,147 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  describe('nodejs', () => {
+    it('should not remove style when navigating from static imported component to next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/nodejs')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/basic"]')
+          .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 to next/dynamic ssr: false', async () => {
+      const browser = await next.browser('/next-dynamic/nodejs')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/ssr-false"]')
+          .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 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)')
+    })
+  })
+
+  describe('edge', () => {
+    it('should not remove style when navigating from static imported component to next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/edge')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/basic"]')
+          .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 to next/dynamic ssr: false', async () => {
+      const browser = await next.browser('/next-dynamic/edge')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/ssr-false"]')
+          .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 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)')
+    })
+  })
+})

test/e2e/pages-dir/css-module/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

test/e2e/pages-dir/css-module/pages/dynamic-import/basic.tsx

@@ -0,0 +1,5 @@
+import { RedButtonLazy } from '../../components/red-button-lazy'
+
+export default function Home() {
+  return <RedButtonLazy />
+}

test/e2e/pages-dir/css-module/pages/dynamic-import/edge.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import { RedButton } from '../../components/red-button'
+import { RedButtonLazy } from '../../components/red-button-lazy'
+
+export default function Home() {
+  return (
+    <>
+      <Link href="/dynamic-import/basic">/dynamic-import/basic</Link>
+      {/* Both RedButton and RedButtonLazy should be imported to reproduce the issue */}
+      <RedButton />
+      <RedButtonLazy />
+    </>
+  )
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}

test/e2e/pages-dir/css-module/pages/dynamic-import/nodejs.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+import { RedButton } from '../../components/red-button'
+import { RedButtonLazy } from '../../components/red-button-lazy'
+
+export default function Home() {
+  return (
+    <>
+      <Link href="/dynamic-import/basic">/dynamic-import/basic</Link>
+      {/* Both RedButton and RedButtonLazy should be imported to reproduce the issue */}
+      <RedButton />
+      <RedButtonLazy />
+    </>
+  )
+}

test/e2e/pages-dir/css-module/pages/index.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/nodejs">/next-dynamic/nodejs</Link>
+      <Link href="/next-dynamic/edge">/next-dynamic/edge</Link>
+      <Link href="/dynamic-import/nodejs">/dynamic-import/nodejs</Link>
+      <Link href="/dynamic-import/edge">/dynamic-import/edge</Link>
+    </div>
+  )
+}

test/e2e/pages-dir/css-module/pages/next-dynamic/basic.tsx

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic'
+
+const NextDynamicRedButton = dynamic(() =>
+  import('../../components/red-button').then((module) => module.RedButton)
+)
+
+export default function NextDynamic() {
+  return <NextDynamicRedButton />
+}

test/e2e/pages-dir/css-module/pages/next-dynamic/edge/index.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import { RedButton } from '../../../components/red-button'
+
+export default function Home() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/basic">/next-dynamic/basic</Link>
+      <Link href="/next-dynamic/ssr-false">/next-dynamic/ssr-false</Link>
+      <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
+      {/* RedButton should be imported to reproduce the issue */}
+      <RedButton />
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}

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(<button>Red Button on Standby</button>)
+  const handleClick = () => {
+    setButton(<NextDynamicRedButton />)
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
+      <button onClick={handleClick}>Click to load red button</button>
+      <RedButton />
+      {button}
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}