Ensure .client.tsx/.ts/.jsx Client Components can be imported (#38591)

vercel · Jul 13, 2022 · db4f032 · db4f032
1 parent 722e64f
commit db4f032
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -58,6 +58,7 @@ import { withoutRSCExtensions } from './utils'
 import browserslist from 'next/dist/compiled/browserslist'
 import loadJsConfig from './load-jsconfig'
 import { loadBindings } from './swc'
+import { clientComponentRegex } from './webpack/loaders/utils'
 
 const watchOptions = Object.freeze({
   aggregateTimeout: 5,
@@ -1311,7 +1312,7 @@ export default async function getBaseWebpackConfig(
                   },
                 },
                 {
-                  test: /(\.client\.(js|cjs|mjs))$|\/next\/(link|image|future\/image|head|script)/,
+                  test: clientComponentRegex,
                   issuerLayer: 'sc_server',
                   use: {
                     loader: 'next-flight-client-loader',

diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
@@ -1,6 +1,14 @@
 export const defaultJsFileExtensions = ['js', 'mjs', 'jsx', 'ts', 'tsx']
 const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
-const nextClientComponents = ['link', 'image', 'head', 'script', 'dynamic']
+const nextClientComponents = [
+  'link',
+  'image',
+  // TODO-APP: check if this affects the regex
+  'future/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/client-comp.client.jsx b/test/e2e/app-dir/app/app/dashboard/client-comp.client.jsx
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+export default function ClientComp() {
+  const [state, setState] = useState({})
+  useEffect(() => {
+    setState({ test: 'HELLOOOO' })
+  }, [])
+  return (
+    <>
+      <p>Hello</p>
+      {state.test}
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/page.server.js b/test/e2e/app-dir/app/app/dashboard/page.server.js
@@ -1,8 +1,10 @@
+import ClientComp from './client-comp.client'
 export default function DashboardPage(props) {
   return (
     <>
       <p className="p">hello from app/dashboard</p>
       <p className="green">this is green</p>
+      <ClientComp />
     </>
   )
 }