From df43692a78cf4bb5432fda6291b8f83d8a61cbe4 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 13 Jul 2022 14:24:51 +0200
Subject: [PATCH 1/2] Ensure .client.tsx/.ts/.jsx Client Components can be
 imported

---
 packages/next/build/webpack-config.ts              |  3 ++-
 packages/next/build/webpack/loaders/utils.ts       |  9 ++++++++-
 .../app/app/dashboard/client-comp.client.jsx       | 14 ++++++++++++++
 test/e2e/app-dir/app/app/dashboard/page.server.js  |  2 ++
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 test/e2e/app-dir/app/app/dashboard/client-comp.client.jsx

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index a87ecb9333bd..c2f0c3d11a1c 100644
--- 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
index c1a3ecd91a0a..da0550020a51 100644
--- a/packages/next/build/webpack/loaders/utils.ts
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -1,6 +1,13 @@
 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',
+  '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
new file mode 100644
index 000000000000..68e5a478a88d
--- /dev/null
+++ 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
index 02f5972711fb..49c95abfbf36 100644
--- 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 />
     </>
   )
 }

From 7405eb06f2dff66a4a9e6f28f4efa7b9fae66aa9 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 13 Jul 2022 14:29:28 +0200
Subject: [PATCH 2/2] Add todo

---
 packages/next/build/webpack/loaders/utils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
index da0550020a51..a06143433df1 100644
--- a/packages/next/build/webpack/loaders/utils.ts
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -3,6 +3,7 @@ const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
 const nextClientComponents = [
   'link',
   'image',
+  // TODO-APP: check if this affects the regex
   'future/image',
   'head',
   'script',