Remove internal client next api detection (#40646)

Follow up for #40415

Remove internal next client api determination, fully relying on `'client'` directive.
Change `.client.js` extension to `.js ` in tests, remove legacy / unused test files

packages/next/build/webpack-config.ts

@@ -1483,7 +1483,7 @@ export default async function getBaseWebpackConfig(
                   include: [
                     dir,
                     // To let the internal client components passing through flight loader
-                    /next[\\/]dist[\\/]client[\\/]/,
+                    /next[\\/]dist/,
                   ],
                   issuerLayer: WEBPACK_LAYERS.server,
                   use: {

packages/next/build/webpack/loaders/next-flight-loader/index.ts

@@ -44,7 +44,6 @@ export default async function transformSource(
   })
 
   const rscType = getRSCModuleType(source)
-  const isModule = swcAST.type === 'Module'
   const createError = (name: string) =>
     new Error(
       `${name} is not supported in client components.\nFrom: ${this.resourcePath}`
@@ -74,6 +73,7 @@ export default async function transformSource(
     return callback(null, source, sourceMap)
   }
 
+  const isModule = swcAST.type === 'Module'
   const code = transformServer(source, isModule)
   return callback(null, code, sourceMap)
 }

packages/next/build/webpack/loaders/utils.ts

@@ -1,34 +1,12 @@
 import { RSC_MODULE_TYPES } from '../../../shared/lib/constants'
 
-const nextClientComponents = [
-  'dist/client/link',
-  'dist/client/image',
-  'dist/client/future/image',
-  'dist/shared/lib/head',
-  'dist/client/script',
-  'dist/shared/lib/dynamic',
-]
-
 const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
 const imageRegex = new RegExp(`\\.(${imageExtensions.join('|')})$`)
 
-const NEXT_API_CLIENT_RSC_REGEX = new RegExp(
-  `next[\\\\/](${nextClientComponents.join('|')})(\\.js)?`
-)
-
-// Cover resource paths like `next/dist/client/*`
-export function isNextBuiltInClientComponent(resource: string) {
-  return NEXT_API_CLIENT_RSC_REGEX.test(resource)
-}
-
 export function isClientComponentModule(mod: {
   resource: string
   buildInfo: any
 }) {
   const hasClientDirective = mod.buildInfo.rsc?.type === RSC_MODULE_TYPES.client
-  return (
-    isNextBuiltInClientComponent(mod.resource) ||
-    hasClientDirective ||
-    imageRegex.test(mod.resource)
-  )
+  return hasClientDirective || imageRegex.test(mod.resource)
 }

test/e2e/app-dir/rsc-basic.test.ts

@@ -150,17 +150,6 @@ describe('app dir - react server components', () => {
     expect(sharedServerModule[0][1]).toBe(sharedServerModule[1][1])
     expect(sharedClientModule[0][1]).toBe(sharedClientModule[1][1])
     expect(sharedServerModule[0][1]).not.toBe(sharedClientModule[0][1])
-
-    // Note: This is currently unsupported because packages from another layer
-    // will not be re-initialized by webpack.
-    // Should import 2 module instances for node_modules too.
-    // const modFromClient = main.match(
-    //   /node_modules instance from \.client\.js:(\d+)/
-    // )
-    // const modFromServer = main.match(
-    //   /node_modules instance from \.server\.js:(\d+)/
-    // )
-    // expect(modFromClient[1]).not.toBe(modFromServer[1])
   })
 
   it('should be able to navigate between rsc routes', async () => {

test/e2e/app-dir/rsc-basic/app/css-in-js/page.js

@@ -1,5 +1,5 @@
-import Comp from './styled-jsx.client'
-import StyledComp from './styled-components.client'
+import Comp from './styled-jsx'
+import StyledComp from './styled-components'
 
 export default function Page() {
   return (

test/e2e/app-dir/rsc-basic/app/css-modules/page.js

@@ -1,5 +1,5 @@
 // CSS modules can only be imported inside client components for now.
-import RedText from '../../components/red/index.client'
+import RedText from '../../components/red/index'
 
 export default function CSSM() {
   return (

test/e2e/app-dir/rsc-basic/app/layout.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import RootStyleRegistry from './root-style-registry.client'
+import RootStyleRegistry from './root-style-registry'
 
 export default function AppLayout({ children }) {
   return (

test/e2e/app-dir/rsc-basic/app/native-module/page.js

@@ -1,6 +1,6 @@
 import fs from 'fs'
 
-import Foo from '../../components/foo.client'
+import Foo from '../../components/foo'
 
 export default function Page() {
   return (

test/e2e/app-dir/rsc-basic/app/partial-hydration/page.js

@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 
-import Counter from '../../components/partial-hydration-counter.client'
+import Counter from '../../components/partial-hydration-counter'
 
 let result
 let promise

test/e2e/app-dir/rsc-basic/app/shared/page.js

@@ -1,11 +1,9 @@
-import ClientFromDirect from '../../components/client.client'
+import ClientFromDirect from '../../components/client'
 import ClientFromShared from '../../components/shared'
-import SharedFromClient from '../../components/shared.client'
-import Random from '../../components/random-module-instance.client'
+import SharedFromClient from '../../components/shared-client'
+import Random from '../../components/random-module-instance'
 import Bar from '../../components/bar'
 
-// import { random } from 'random-module-instance'
-
 export default function Page() {
   // All three client components should be rendered correctly, but only
   // shared component is a server component, and another is a client component.
@@ -16,7 +14,6 @@ export default function Page() {
     <div id="main" suppressHydrationWarning>
       <Random />
       <br />
-      {/* {`node_modules instance from .server.js:` + random} */}
       <br />
       <ClientFromDirect />
       <br />

test/e2e/app-dir/rsc-basic/app/various-exports/page.js

@@ -3,12 +3,13 @@ import { a, b, c, d, e } from '../../components/shared-exports'
 // client default, named exports
 import DefaultArrow, {
   Named as ClientNamed,
-} from '../../components/client-exports.client'
+} from '../../components/client-exports'
 
-import { Cjs as CjsShared } from '../../components/cjs'
-import { Cjs as CjsClient } from '../../components/cjs.client'
+import { Cjs as CjsShared } from '../../components/cjs-server'
+import { Cjs as CjsClient } from '../../components/cjs-client'
 
-import { One, Two, TwoAliased } from '../../components/export-all/index.client'
+// client exports all
+import { One, Two, TwoAliased } from '../../components/export-all'
 
 export default function Page() {
   return (

test/e2e/app-dir/rsc-basic/components/bar.js

@@ -1,4 +1,4 @@
-import Foo from './foo.client'
+import Foo from './foo'
 
 export default function Bar() {
   return (

test/e2e/app-dir/rsc-basic/components/random-module-instance.client.js → test/e2e/app-dir/rsc-basic/components/random-module-instance.js

@@ -3,5 +3,5 @@
 import { random } from 'random-module-instance'
 
 export default function () {
-  return `node_modules instance from .client.js:${random}`
+  return `node_modules instance from client module ${random}`
 }

test/e2e/app-dir/rsc-basic/components/shared.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Client from './client.client'
+import Client from './client'
 
 const random = ~~(Math.random() * 10000)
 

test/integration/react-streaming/app/components/bar.client.js → test/integration/react-streaming/app/components/bar.js

@@ -1,3 +1,3 @@
 export default function bar() {
-  return 'bar.client'
+  return 'bar'
 }

test/integration/react-streaming/app/components/foo.client.js → test/integration/react-streaming/app/components/foo.js

@@ -1,5 +1,5 @@
 export default function foo() {
-  return 'foo.client'
+  return 'foo'
 }
 
 export const config = 'this is not page config'

test/integration/react-streaming/app/pages/dynamic-imports.js

@@ -1,8 +1,8 @@
 import { lazy, Suspense } from 'react'
 import dynamic from 'next/dynamic'
 
-const Foo = lazy(() => import('../components/foo.client'))
-const Bar = dynamic(() => import('../components/bar.client'), {
+const Foo = lazy(() => import('../components/foo'))
+const Bar = dynamic(() => import('../components/bar'), {
   suspense: true,
 })