From 61513c656722dcae5e4d1c8525680713f2d4d0da Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 3 Aug 2022 23:10:06 +0200
Subject: [PATCH] Use require hook and alias to resolve styled-jsx

---
 package.json                                              | 1 -
 .../crates/core/tests/loader/front/attr-1/output.js       | 2 +-
 packages/next-swc/crates/styled_jsx/src/utils.rs          | 2 +-
 .../styled_jsx/tests/errors/nested-style-tags/output.js   | 2 +-
 .../crates/styled_jsx/tests/errors/no-child/output.js     | 2 +-
 .../styled_jsx/tests/errors/ts-with-css-resolve/output.js | 2 +-
 .../crates/styled_jsx/tests/errors/two-children/output.js | 2 +-
 .../styled_jsx/tests/errors/wrong-child-type/output.js    | 2 +-
 .../tests/errors/wrong-jsx-expression-type/output.js      | 2 +-
 .../attribute-generation-classname-rewriting/output.js    | 2 +-
 .../tests/fixture/attribute-generation-modes/output.js    | 2 +-
 .../crates/styled_jsx/tests/fixture/class/output.js       | 2 +-
 .../crates/styled_jsx/tests/fixture/comments/output.js    | 2 +-
 .../tests/fixture/component-attribute/output.js           | 2 +-
 .../tests/fixture/css-selector-after-pseudo/output.js     | 2 +-
 .../styled_jsx/tests/fixture/css-tag-same-file/output.js  | 2 +-
 .../styled_jsx/tests/fixture/different-jsx-ids/output.js  | 2 +-
 .../tests/fixture/dynamic-element-class/output.js         | 2 +-
 .../tests/fixture/dynamic-element-external/output.js      | 2 +-
 .../styled_jsx/tests/fixture/dynamic-element/output.js    | 2 +-
 .../crates/styled_jsx/tests/fixture/expressions/output.js | 2 +-
 .../tests/fixture/external-nested-scope/output.js         | 2 +-
 .../tests/fixture/external-stylesheet-global/output.js    | 2 +-
 .../fixture/external-stylesheet-multi-line/output.js      | 2 +-
 .../tests/fixture/external-stylesheet/output.js           | 2 +-
 .../crates/styled_jsx/tests/fixture/fragment/output.js    | 2 +-
 .../tests/fixture/global-child-selector/output.js         | 2 +-
 .../styled_jsx/tests/fixture/global-redundant/output.js   | 2 +-
 .../crates/styled_jsx/tests/fixture/global/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/issue-30480/output.js | 2 +-
 .../crates/styled_jsx/tests/fixture/issue-30570/output.js | 2 +-
 .../fixture/issue-31562-interpolation-in-mdea/output.js   | 2 +-
 .../tests/fixture/mixed-global-scoped/output.js           | 2 +-
 .../styled_jsx/tests/fixture/multiple-jsx/output.js       | 2 +-
 .../tests/fixture/non-styled-jsx-style/output.js          | 2 +-
 .../tests/fixture/number-after-placeholder/output.js      | 2 +-
 .../tests/fixture/one-off-global-selectors/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/stateless/output.js   | 2 +-
 .../crates/styled_jsx/tests/fixture/styles/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/too-many/output.js    | 2 +-
 .../styled_jsx/tests/fixture/tpl-escape-1/output.js       | 2 +-
 .../styled_jsx/tests/fixture/tpl-escape-2/output.js       | 2 +-
 .../tests/fixture/tpl-placeholder-1-as-property/output.js | 2 +-
 .../fixture/tpl-placeholder-2-as-part-of-value/output.js  | 2 +-
 .../tests/fixture/tpl-placeholder-3-as-value/output.js    | 2 +-
 .../output.js                                             | 2 +-
 .../output.js                                             | 2 +-
 .../fixture/transform-css-complex-selector/output.js      | 2 +-
 .../tests/fixture/transform-css-global/output.js          | 2 +-
 .../tests/fixture/transform-css-media-query/output.js     | 2 +-
 .../tests/fixture/transform-css-normal/output.js          | 2 +-
 .../tests/fixture/transform-css-nth-1/output.js           | 2 +-
 .../styled_jsx/tests/fixture/transform-css/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/whitespace/output.js  | 2 +-
 packages/next/build/babel/preset.ts                       | 2 +-
 packages/next/build/webpack-config.ts                     | 8 +++++++-
 packages/next/build/webpack/require-hook.ts               | 2 ++
 packages/next/pages/_error.tsx                            | 4 ++--
 packages/next/shared/lib/styled-jsx/index.d.ts            | 1 +
 packages/next/shared/lib/styled-jsx/index.js              | 1 +
 .../shared/lib/{styled-jsx.d.ts => styled-jsx/style.d.ts} | 0
 .../shared/lib/{styled-jsx.js => styled-jsx/style.js}     | 0
 pnpm-lock.yaml                                            | 2 --
 test/e2e/app-dir/rsc-basic.test.ts                        | 1 -
 .../app-dir/rsc-basic/app/root-style-registry.client.js   | 4 +---
 65 files changed, 68 insertions(+), 64 deletions(-)
 create mode 100644 packages/next/shared/lib/styled-jsx/index.d.ts
 create mode 100644 packages/next/shared/lib/styled-jsx/index.js
 rename packages/next/shared/lib/{styled-jsx.d.ts => styled-jsx/style.d.ts} (100%)
 rename packages/next/shared/lib/{styled-jsx.js => styled-jsx/style.js} (100%)

diff --git a/package.json b/package.json
index 5877847f2216..881653e3f2bc 100644
--- a/package.json
+++ b/package.json
@@ -191,7 +191,6 @@
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
     "styled-components": "5.3.3",
-    "styled-jsx": "link:packages/next/node_modules/styled-jsx",
     "styled-jsx-plugin-postcss": "3.0.2",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
diff --git a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
index f82bfb4e4a00..3c7b478d94b0 100644
--- a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
+++ b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default function Foo() {
     return /*#__PURE__*/ React.createElement("div", {
         render: function(v) {
diff --git a/packages/next-swc/crates/styled_jsx/src/utils.rs b/packages/next-swc/crates/styled_jsx/src/utils.rs
index 678762e3c4fa..e916ab37e325 100644
--- a/packages/next-swc/crates/styled_jsx/src/utils.rs
+++ b/packages/next-swc/crates/styled_jsx/src/utils.rs
@@ -310,7 +310,7 @@ pub fn styled_jsx_import_decl(style_import_name: &str) -> ModuleItem {
         })],
         src: Str {
             span: DUMMY_SP,
-            value: "next/dist/shared/lib/styled-jsx".into(),
+            value: "next/dist/shared/lib/styled-jsx/style".into(),
             raw: None,
         },
     }))
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
index 38d68136f2d8..d53f2bef9299 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const Component = ()=><>
     <header >
       <Comp >
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
index 908b640b076a..f366d5daac81 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
index 25cdb1e61b5e..d73d5b4e6d8c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default {
     styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
     className: "jsx-71f03d42ea0ec6"
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
index c7b8f47dbdc6..08d0e29a4c81 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
index 975160bce5f5..c83c2831d159 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
index b0b23eb58280..5bb9f55a598d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
index 34b1e418b045..965ce1c8e325 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=>{
     const Element = 'div';
     return <div className={"jsx-abb4c2202db1a207"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
index a8a8ccdae3c1..e4a31a67bf0b 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import styles from './styles';
 const styles2 = require('./styles2');
 // external only
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
index c672e5420f8c..983fffa64b8f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={"jsx-b2b86d63f35d25ee"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
index 7cc46c594484..5b24f9c89c7d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={"jsx-1952086b0a5ae64c"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
index 57bdc6ef95ff..2a67258a62a6 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
 
     <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
index da59e7db9b1e..04789a104f2f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 function NavigationItem({ active , className ,  }) {
     return <span className={"jsx-2342aae4628612c6" + " " + (cn({
         active
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
index fc2f4023befe..dfec8c3ff3c2 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (({ children  })=><div className={`jsx-${styles.__hash}`}>
 
     <p className={`jsx-${styles.__hash}`}>{children}</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
index 763201482ebd..a76cab264714 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const color = 'red';
 const otherColor = 'green';
 const A = ()=><div className={"jsx-551210e97e875d0e"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
index c4581cb358b7..6eb4bd1be61c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         const Element = 'div';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
index d7f87b88921c..bccd6d9fce18 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import styles from './styles2';
 export default (({ level =1  })=>{
     const Element = `h${level}`;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
index 3f98c1be1bf8..eec3a9d86d3a 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (({ level =1  })=>{
     const Element = `h${level}`;
     return <Element className={"jsx-fca64cc3f069b519" + " " + "root"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
index 06f67cc9de4d..eac17b2f7492 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const darken = (c)=>c;
 const color = 'red';
 const otherColor = 'green';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
index 5f8e096fab3d..02b712b20e32 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 function test() {
     ({
         styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
index a6c0b12c07c3..6af20e90bd46 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import styles, { foo as styles3 } from './styles';
 const styles2 = require('./styles2');
 export default (()=><div >
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
index be5dba099e6f..8d4871d11d5c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import styles from './styles';
 export default (()=><div className={`jsx-${styles.__hash}`}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
index fe6a2446a84d..f2cdd1c0dda2 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import styles from './styles';
 const styles2 = require('./styles2');
 import { foo as styles3 } from './styles';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
index 863dd81a92c4..bc044b514162 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import React from 'react';
 export default (()=><>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
index 8073e4ec4e88..d4bf00b8017e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>
 
     <span className={"jsx-5a206f122d1cb32e"}>test</span>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
index 50394bb0a73d..9497b34b15d8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default function IndexPage() {
     return <div className={"jsx-b6abd0684ba81871"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
index fda52288d0a2..c4deb89a36f2 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
 
     <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;-moz-animation:foo 1s ease-out;-o-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
index 055716c59704..181d6f7587bf 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (({ breakPoint  })=><div className={_JSXStyle.dynamic([
         [
             "5d2a0e645566ce9c",
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
index 2d9f86984434..6f526d224bf8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default function IndexPage() {
     return <div className={"jsx-bbdada4ef17d18ef"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
index 91173df42565..8203f3729956 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
index d29cb9bac0da..f44f0b7ca9f8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;
 export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
index 9537d3a60e50..d9667c50a87c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 const attrs = {
     id: 'test'
 };
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
index 852200c7f31c..66bb6e6835df 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
index 55825a5c4b00..1c454e839400 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import Link from "next/link";
 export default function IndexPage() {
     return <div className={"jsx-9a4b3442d519aae9"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
index c5276ef55d29..54e33f8f885d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-c7c3a8e231c9215a"}>
 
     <p className={"jsx-c7c3a8e231c9215a"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
index 1ad586b9797a..ec8e525b0238 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
index e114321b54a1..eb705f0ceb70 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 import colors, { size } from './constants';
 const color = 'red';
 const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
index 67c714a05cd8..0c6f21ad7699 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export const Red = ({ Component ='button' ,  })=>{
     return <Component className={_JSXStyle.dynamic([
         [
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
index 32189113aca2..ed3d9739d8a9 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={"jsx-1f6cef12199c3a8f"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
index 04d7cbd73a9c..2422e898c6a7 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default function Home({ fontFamily  }) {
     return <div className={_JSXStyle.dynamic([
         [
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
index 3d9ebca458d4..e620cc5ad8e4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
index f0765f7b53ba..70fa0ff585df 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
index e40fc79d7229..2eef679c5c09 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
index 282cdbfbc457..05dc1b550e3d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
index 15d6fc1b3538..12ca1c55127c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
index 81e7e38adca8..9588c3acc5d4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-713499aa363d6373"}>
 
     <p className={"jsx-713499aa363d6373"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
index c852fdc8ab45..bc58053d01c7 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-53fd644ab080300c"}>
 
     <p className={"jsx-53fd644ab080300c"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
index be2e15a483cf..7294115e2c8f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-1f7963ae04c6466a"}>
 
     <p className={"jsx-1f7963ae04c6466a"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
index d1a391c65347..86cba8d3fad8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-1a19bb4817c105dd"}>
 
     <p className={"jsx-1a19bb4817c105dd"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
index 7f4b47ebf64f..c6f3b90ba5fd 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-938ca197692ef624"}>
 
       <p className={"jsx-938ca197692ef624"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
index 458a364376b4..5a01788cbfe1 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-768337a97aceabd1"}>
 
     <p className={"jsx-768337a97aceabd1"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
index 1ad586b9797a..ec8e525b0238 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
index cc97d68c4805..e36a1c175c4e 100644
--- a/packages/next/build/babel/preset.ts
+++ b/packages/next/build/babel/preset.ts
@@ -16,7 +16,7 @@ type StyledJsxBabelOptions =
 // Resolve styled-jsx plugins
 function styledJsxOptions(options: StyledJsxBabelOptions) {
   options = options || {}
-  options.styleModule = 'next/dist/shared/lib/styled-jsx'
+  options.styleModule = 'next/dist/shared/lib/styled-jsx/style'
 
   if (!Array.isArray(options.plugins)) {
     return options
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 5f9d502d507a..1152ce36e0b2 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -685,6 +685,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(`styled-jsx/style`),
+      'styled-jsx$': require.resolve(`styled-jsx`),
 
       ...customAppAliases,
       ...customErrorAlias,
@@ -816,9 +818,13 @@ export default async function getBaseWebpackConfig(
       resolveRequest: string
     ) => Promise<[string | null, boolean]>
   ) {
+    // Rewrite back to internals to avoid bundled into chunks after overriding in require-hook
+    if (request === 'styled-jsx') {
+      request = 'next/dist/shared/lib/styled-jsx'
+    }
     // We need to externalize internal requests for files intended to
     // not be bundled.
-    const isLocal: boolean =
+    let isLocal: boolean =
       request.startsWith('.') ||
       // Always check for unix-style path, as webpack sometimes
       // normalizes as posix.
diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index 50d10f7d4425..16275bd5a663 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/packages/next/build/webpack/require-hook.ts
@@ -126,6 +126,8 @@ const hookPropertyMap = new Map(
       'next/dist/compiled/@babel/runtime/package.json',
     ],
     ['node-fetch', 'next/dist/compiled/node-fetch'],
+    ['styled-jsx/style', 'styled-jsx/style'],
+    ['styled-jsx', 'styled-jsx'],
   ].map(([request, replacement]) => [request, require.resolve(replacement)])
 )
 
diff --git a/packages/next/pages/_error.tsx b/packages/next/pages/_error.tsx
index aac6190c1d2e..3a512cb70f7d 100644
--- a/packages/next/pages/_error.tsx
+++ b/packages/next/pages/_error.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Head from '../shared/lib/head'
-import { NextPageContext } from '../shared/lib/utils'
+import type { NextPageContext } from '../shared/lib/utils'
 
 const statusCodes: { [code: number]: string } = {
   400: 'Bad Request',
@@ -57,7 +57,7 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
                 .next-error-h1 {
                   border-right: 1px solid rgba(0, 0, 0, .3);
                 }
-                
+
                 ${
                   withDarkMode
                     ? `@media (prefers-color-scheme: dark) {
diff --git a/packages/next/shared/lib/styled-jsx/index.d.ts b/packages/next/shared/lib/styled-jsx/index.d.ts
new file mode 100644
index 000000000000..3ee1cf7cf4b4
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx/index.d.ts
@@ -0,0 +1 @@
+export * from 'styled-jsx'
diff --git a/packages/next/shared/lib/styled-jsx/index.js b/packages/next/shared/lib/styled-jsx/index.js
new file mode 100644
index 000000000000..a28adad1cbf5
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx/index.js
@@ -0,0 +1 @@
+module.exports = require('styled-jsx')
diff --git a/packages/next/shared/lib/styled-jsx.d.ts b/packages/next/shared/lib/styled-jsx/style.d.ts
similarity index 100%
rename from packages/next/shared/lib/styled-jsx.d.ts
rename to packages/next/shared/lib/styled-jsx/style.d.ts
diff --git a/packages/next/shared/lib/styled-jsx.js b/packages/next/shared/lib/styled-jsx/style.js
similarity index 100%
rename from packages/next/shared/lib/styled-jsx.js
rename to packages/next/shared/lib/styled-jsx/style.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f34119622c7f..a9c1799afeb7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,6 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3
-      styled-jsx: link:packages/next/node_modules/styled-jsx
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
@@ -308,7 +307,6 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3_vtcxgy2wlmese7djxl6h7ok674
-      styled-jsx: link:packages/next/node_modules/styled-jsx
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts
index 9c0ee623e3fe..632f17a55d57 100644
--- a/test/e2e/app-dir/rsc-basic.test.ts
+++ b/test/e2e/app-dir/rsc-basic.test.ts
@@ -41,7 +41,6 @@ describe('app dir - react server components', () => {
         'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
       },
       dependencies: {
-        'styled-jsx': 'latest',
         'styled-components': '6.0.0-alpha.5',
         react: 'experimental',
         'react-dom': 'experimental',
diff --git a/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js b/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js
index 922aa3ee46a4..c642e14fb1a7 100644
--- a/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js
+++ b/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js
@@ -20,12 +20,10 @@ export default function RootStyleRegistry({ children }) {
   }
 
   useFlushEffects(() => {
-    const effects = styledComponentsFlushEffect()
-
     return (
       <>
         {styledJsxFlushEffect()}
-        {effects}
+        {styledComponentsFlushEffect()}
       </>
     )
   })