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..ed60ad648aa2 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 "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..bc720b16af38 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: "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..6a801091839c 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 "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..90fb7d27831c 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 "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..6fbd823e7814 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 "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..743be800fcfe 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 "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..e4317fb3df8e 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 "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..6769772a8834 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 "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..939e06090f38 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 "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..79516afad09e 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 "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..81b79672c77a 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 "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..7c26aca7e820 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 "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..cdc5e031093f 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 "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..c0cd6ea4718b 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 "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..ffc1a2bf670f 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 "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..d5495dcdb338 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 "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..49ba7ea7f920 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 "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..e96530e25335 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 "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..fe05a5238005 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 "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..9f37a3947413 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 "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..ec88815709af 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 "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..862421061d48 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 "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..f8b2e5133e5e 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 "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..c22231857c55 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 "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..a0946ccb7bca 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 "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..521e38dde02b 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 "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..aba1ba957e3d 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 "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..0e54f9efefe1 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 "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..a199bc3ffbe3 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 "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..c97fb8923815 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 "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..abac19ba636a 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 "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..bb98a20afbc3 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 "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..dceca90ed7c1 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 "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..5977ac8dd5cd 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 "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..c5b32ba71742 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 "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..479aff6f659b 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 "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..53d2bfccf343 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 "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..f158babca41d 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 "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..55a7eb25e8d2 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 "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..dac32b1dded4 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 "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..aadbcf64aef9 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 "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..cc6b31de3adb 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 "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..fd7abeb01a1f 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 "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..f7345d563135 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 "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..375dee3f9403 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 "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..991a76b6f2ed 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 "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..37a9d1b4826c 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 "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..a9e2480b87af 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 "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..555929a70b25 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 "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..6efb20adad80 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 "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..5351dd0980a2 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 "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..1420b4c3e953 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 "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..53d2bfccf343 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 "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..5ea2a647a5e9 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 = '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..a927b70bd3e4 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$': require.resolve('styled-jsx'),
+      'styled-jsx/style$': require.resolve('styled-jsx/style'),
 
       ...customAppAliases,
       ...customErrorAlias,
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.d.ts b/packages/next/shared/lib/styled-jsx.d.ts
deleted file mode 100644
index 716fb641fed5..000000000000
--- a/packages/next/shared/lib/styled-jsx.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function JSXStyle(props: any): null
diff --git a/packages/next/shared/lib/styled-jsx.js b/packages/next/shared/lib/styled-jsx.js
deleted file mode 100644
index a349928dce20..000000000000
--- a/packages/next/shared/lib/styled-jsx.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('styled-jsx/style')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db32f8afd423..2f0049a3dcd7 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
@@ -7774,7 +7772,7 @@ packages:
       mississippi: 3.0.0
       mkdirp: 0.5.5
       move-concurrently: 1.0.1
-      promise-inflight: 1.0.1_bluebird@3.7.2
+      promise-inflight: 1.0.1
       rimraf: 2.7.1
       ssri: 6.0.1
       unique-filename: 1.1.1
@@ -18207,17 +18205,6 @@ packages:
         optional: true
     dev: true
 
-  /promise-inflight/1.0.1_bluebird@3.7.2:
-    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
-    dependencies:
-      bluebird: 3.7.2
-    dev: true
-
   /promise-polyfill/6.1.0:
     resolution: {integrity: sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ==}
     dev: true
@@ -20852,7 +20839,7 @@ packages:
       worker-farm: 1.7.0
     dev: true
 
-  /terser-webpack-plugin/5.2.4:
+  /terser-webpack-plugin/5.2.4_webpack@5.74.0:
     resolution: {integrity: sha512-E2CkNMN+1cho04YpdANyRrn8CyN4yMy+WdFKZIySFZrGXZxJwJP6PMNGGc/Mcr6qygQHUUqRxnAPmi0M9f00XA==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -20874,6 +20861,7 @@ packages:
       serialize-javascript: 6.0.0
       source-map: 0.6.1
       terser: 5.14.1
+      webpack: 5.74.0
     dev: true
 
   /terser/4.8.0:
@@ -21224,7 +21212,7 @@ packages:
       typescript: 4.6.3
 
   /tty-browserify/0.0.0:
-    resolution: {integrity: sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==}
+    resolution: {integrity: sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=}
     dev: true
 
   /tty-browserify/0.0.1:
@@ -22307,7 +22295,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.1.1
       tapable: 2.2.0
-      terser-webpack-plugin: 5.2.4
+      terser-webpack-plugin: 5.2.4_webpack@5.74.0
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:
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()}
       </>
     )
   })