diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
index d6e113f1f93c..c1a3ecd91a0a 100644
--- a/packages/next/build/webpack/loaders/utils.ts
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -1,6 +1,6 @@
export const defaultJsFileExtensions = ['js', 'mjs', 'jsx', 'ts', 'tsx']
const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
-const nextClientComponents = ['link', 'image', 'head', 'script']
+const nextClientComponents = ['link', 'image', 'head', 'script', 'dynamic']
const NEXT_BUILT_IN_CLIENT_RSC_REGEX = new RegExp(
`[\\\\/]next[\\\\/](${nextClientComponents.join('|')})\\.js$`
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js b/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
new file mode 100644
index 000000000000..a754ecb2082a
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
@@ -0,0 +1,11 @@
+import { useState } from 'react'
+import styles from './dynamic.module.css'
+
+export default function Dynamic() {
+ let [state] = useState('next dynamic')
+ return (
+
+ hello from modern the {state}
+
+ )
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic.module.css b/test/e2e/app-dir/app/app/dashboard/index/dynamic.module.css
new file mode 100644
index 000000000000..97af642339e0
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic.module.css
@@ -0,0 +1,3 @@
+.dynamic {
+ color: blue;
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js b/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
index 5f03b364a88f..1c225c38b190 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
@@ -1,7 +1,11 @@
+import styles from './lazy.module.css'
+
export default function LazyComponent() {
return (
<>
- hello from lazy
+
+ hello from lazy
+
>
)
}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/lazy.module.css b/test/e2e/app-dir/app/app/dashboard/index/lazy.module.css
new file mode 100644
index 000000000000..4369b2c770ee
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/lazy.module.css
@@ -0,0 +1,3 @@
+.lazy {
+ color: purple;
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js b/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js
new file mode 100644
index 000000000000..6728a87f463c
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const Dynamic = dynamic(() => import('./dynamic.client'))
+
+export function NextDynamicClientComponent() {
+ return
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/page.server.js b/test/e2e/app-dir/app/app/dashboard/index/page.server.js
index 8cf1ff530d6c..d12da1104893 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/page.server.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/page.server.js
@@ -1,10 +1,12 @@
-import { ClientComponent } from './test.client.js'
+import { LazyClientComponent } from './react-lazy.client'
+import { NextDynamicClientComponent } from './next-dynamic.client'
export default function DashboardIndexPage() {
return (
<>
hello from app/dashboard/index
-
+
+
>
)
}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/test.client.js b/test/e2e/app-dir/app/app/dashboard/index/react-lazy.client.js
similarity index 85%
rename from test/e2e/app-dir/app/app/dashboard/index/test.client.js
rename to test/e2e/app-dir/app/app/dashboard/index/react-lazy.client.js
index d04b4ce04b3a..7188966f4c8e 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/test.client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/react-lazy.client.js
@@ -2,7 +2,7 @@ import { useState, lazy } from 'react'
const Lazy = lazy(() => import('./lazy.client.js'))
-export function ClientComponent() {
+export function LazyClientComponent() {
let [state] = useState('client')
return (
<>
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 2bb7586f05f5..30cb129cc8c9 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -64,11 +64,24 @@ describe('app dir', () => {
it('should serve /index as separate page', async () => {
const html = await renderViaHTTP(next.url, '/dashboard/index')
expect(html).toContain('hello from app/dashboard/index')
+ // should load chunks generated via async import correctly
+ expect(html).toContain('hello from lazy')
})
- it('should load chunks generated via async import correctly', async () => {
- const html = await renderViaHTTP(next.url, '/dashboard/index')
- expect(html).toContain('hello from lazy')
+ // TODO-APP: handle css modules fouc in dev
+ it.skip('should handle css imports in next/dynamic correctly', async () => {
+ const browser = await webdriver(next.url, '/dashboard/index')
+
+ expect(
+ await browser.eval(
+ `window.getComputedStyle(document.querySelector('#css-text-dynamic')).color`
+ )
+ ).toBe('rgb(0, 0, 255)')
+ expect(
+ await browser.eval(
+ `window.getComputedStyle(document.querySelector('#css-text-lazy')).color`
+ )
+ ).toBe('rgb(128, 0, 128)')
})
it('should include layouts when no direct parent layout', async () => {
diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts
index cd2d4d22ed56..c00edef461c9 100644
--- a/test/e2e/app-dir/rsc-basic.test.ts
+++ b/test/e2e/app-dir/rsc-basic.test.ts
@@ -361,7 +361,9 @@ describe('app dir - react server components', () => {
expect(gotInlinedData).toBe(true)
}
)
+ })
+ it('should support partial hydration with inlined server data in browser', async () => {
// Should end up with "next_streaming_data".
const browser = await webdriver(next.url, '/partial-hydration', {
waitHydration: false,