diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
index a0fb85846dab38a..5ea2a647a5e9bfc 100644
--- a/packages/next/build/babel/preset.ts
+++ b/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'),
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 8d89c4085e519f0..cfff9b5f757a343 100644
--- a/packages/next/build/webpack-config.ts
+++ b/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
diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index 74c2aa128de3466..0c0d6890f78b14f 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/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])
   )
 
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 779120642f13d3e..6b9a524a754fbf4 100644
--- a/packages/next/server/render.tsx
+++ b/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,
diff --git a/packages/next/shared/lib/styled-jsx.d.ts b/packages/next/shared/lib/styled-jsx.d.ts
new file mode 100644
index 000000000000000..57be2222c272af3
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx.d.ts
@@ -0,0 +1 @@
+export { default } from 'styled-jsx/style'
diff --git a/packages/next/shared/lib/styled-jsx.js b/packages/next/shared/lib/styled-jsx.js
new file mode 100644
index 000000000000000..a349928dce207e1
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx.js
@@ -0,0 +1 @@
+module.exports = require('styled-jsx/style')
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 88dde0b576a2a58..005637e4f018736 100644
--- a/packages/next/taskfile.js
+++ b/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 = {
diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts
index 7571c94bfe57377..3b80a2eaf1ebefb 100644
--- a/packages/next/types/misc.d.ts
+++ b/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(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 67c3d8d5acd516c..d09106bdfe265f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10454,6 +10454,7 @@ packages:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
     dependencies:
       eslint: 7.32.0
+    dev: false
 
   /eslint-plugin-react/7.23.2_eslint@7.24.0:
     resolution: {integrity: sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==}