Remove precopied styled-jsx (#39520)

follow-up for #39518

* revert `styled-jsx/style` import path to `next/dist/shared/styled-jsx`
* Since `styled-jsx` cannot be resolved through `node_modules/next/node_modules` by external resolving, we forcedly resolve styled-jsx as cjs external in webpack


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

packages/next/build/babel/preset.ts

@@ -185,8 +185,8 @@ export default (
       ],
       [
         isTest && options['styled-jsx'] && options['styled-jsx']['babel-test']
-          ? require('next/dist/styled-jsx/babel-test')
-          : require('next/dist/styled-jsx/babel'),
+          ? require('styled-jsx/babel-test')
+          : require('styled-jsx/babel'),
         styledJsxOptions(options['styled-jsx']),
       ],
       require('./plugins/amp-attributes'),

packages/next/build/webpack-config.ts

@@ -691,8 +691,8 @@ export default async function getBaseWebpackConfig(
       'react-dom/server$': `${reactDomDir}/server`,
       'react-dom/server.browser$': `${reactDomDir}/server.browser`,
       'react-dom/client$': `${reactDomDir}/client`,
-      'styled-jsx/style$': require.resolve(`next/dist/styled-jsx/style`),
-      'styled-jsx$': require.resolve(`next/dist/styled-jsx`),
+      'styled-jsx/style$': require.resolve(`styled-jsx/style`),
+      'styled-jsx$': require.resolve(`styled-jsx`),
 
       ...customAppAliases,
       ...customErrorAlias,
@@ -846,7 +846,9 @@ export default async function getBaseWebpackConfig(
     // Absolute requires (require('/foo')) are extremely uncommon, but
     // also have no need for customization as they're already resolved.
     if (!isLocal) {
-      if (/^(?:next$|react(?:$|\/))/.test(request)) {
+      // styled-jsx is also marked as externals here to avoid being
+      // bundled in client components for RSC.
+      if (/^(?:next$|styled-jsx$|react(?:$|\/))/.test(request)) {
         return `commonjs ${request}`
       }
 
@@ -868,11 +870,11 @@ export default async function getBaseWebpackConfig(
     const isEsmRequested = dependencyType === 'esm'
 
     const isLocalCallback = (localRes: string) => {
-      // Makes sure dist/styled-jsx, dist/shared and dist/server are not bundled
+      // Makes sure dist/shared and dist/server are not bundled
       // we need to process shared `router/router` and `dynamic`,
       // so that the DefinePlugin can inject process.env values
       const isNextExternal =
-        /next[/\\]dist[/\\](styled-jsx|shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
+        /next[/\\]dist[/\\](shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
           localRes
         )
 
@@ -911,6 +913,13 @@ export default async function getBaseWebpackConfig(
     if ('localRes' in resolveResult) {
       return resolveResult.localRes
     }
+
+    // Forcedly resolve the styled-jsx installed by next.js,
+    // since `resolveExternal` cannot find the styled-jsx dep with pnpm
+    if (request === 'styled-jsx/style') {
+      resolveResult.res = require.resolve(request)
+    }
+
     const { res, isEsm } = resolveResult
 
     // If the request cannot be resolved we need to have

packages/next/build/webpack/require-hook.ts

@@ -7,8 +7,8 @@ export default function loadRequireHook(aliases: [string, string][] = []) {
     [
       ...aliases,
       // Use `require.resolve` explicitly to make them statically analyzable
-      ['styled-jsx', require.resolve('next/dist/styled-jsx')],
-      ['styled-jsx/style', require.resolve('next/dist/styled-jsx/style')],
+      ['styled-jsx', require.resolve('styled-jsx')],
+      ['styled-jsx/style', require.resolve('styled-jsx/style')],
     ].map(([request, replacement]) => [request, replacement])
   )
 

packages/next/server/render.tsx

@@ -28,7 +28,7 @@ import type { UnwrapPromise } from '../lib/coalesced-function'
 import type { ReactReadableStream } from './node-web-streams-helper'
 
 import React from 'react'
-import { StyleRegistry, createStyleRegistry } from 'next/dist/styled-jsx'
+import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {
   GSP_NO_RETURNED_VALUE,
   GSSP_COMPONENT_MEMBER_ERROR,

packages/next/shared/lib/styled-jsx.d.ts

@@ -0,0 +1 @@
+export { default } from 'styled-jsx/style'

packages/next/shared/lib/styled-jsx.js

@@ -0,0 +1 @@
+module.exports = require('styled-jsx/style')

packages/next/taskfile.js

@@ -44,14 +44,11 @@ export async function copy_regenerator_runtime(task, opts) {
 
 // eslint-disable-next-line camelcase
 export async function copy_styled_jsx_assets(task, opts) {
-  // we copy the styled-jsx assets and types so that we can reference them
+  // we copy the styled-jsx types so that we can reference them
   // in the next-env.d.ts file so it doesn't matter if the styled-jsx
   // package is hoisted out of Next.js' node_modules or not
   const styledJsxPath = dirname(require.resolve('styled-jsx/package.json'))
   const typeFiles = glob.sync('*.d.ts', { cwd: styledJsxPath })
-  const jsFiles = glob.sync('**/{index,style,babel,babel-test}.js', {
-    cwd: styledJsxPath,
-  })
   const outputDir = join(__dirname, 'dist/styled-jsx')
   // Separate type files into different folders to avoid conflicts between
   // dev dep `styled-jsx` and `next/dist/styled-jsx` for duplicated declare modules
@@ -62,13 +59,6 @@ export async function copy_styled_jsx_assets(task, opts) {
     const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
     await fs.writeFile(join(typesDir, file), content)
   }
-
-  for (const file of jsFiles) {
-    const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
-    const distFile = join(outputDir, file)
-    await fs.ensureDir(dirname(distFile))
-    await fs.writeFile(distFile, content)
-  }
 }
 
 const externals = {

packages/next/types/misc.d.ts

@@ -284,10 +284,6 @@ declare module 'next/dist/compiled/postcss-scss' {
   import m from 'postcss-scss'
   export = m
 }
-declare module 'next/dist/styled-jsx' {
-  import m from 'styled-jsx'
-  export = m
-}
 
 declare module 'next/dist/compiled/text-table' {
   function textTable(