diff --git a/dev/tsconfig.json b/dev/tsconfig.json
index acb2cba911..2ed96540e9 100644
--- a/dev/tsconfig.json
+++ b/dev/tsconfig.json
@@ -5,7 +5,7 @@
         "moduleResolution": "node",
         "isolatedModules": false,
         "importHelpers": true,
-        "jsx": "react",
+        "jsx": "react-jsxdev",
         "esModuleInterop": true,
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
diff --git a/packages/framer-motion-3d/rollup.config.mjs b/packages/framer-motion-3d/rollup.config.mjs
index ad140b28d2..e089277a19 100644
--- a/packages/framer-motion-3d/rollup.config.mjs
+++ b/packages/framer-motion-3d/rollup.config.mjs
@@ -13,6 +13,7 @@ const external = [
     ...Object.keys(pkg.peerDependencies || {}),
     ...Object.keys(motionPkg.dependencies || {}),
     ...Object.keys(motionPkg.peerDependencies || {}),
+    "react/jsx-runtime",
 ]
 
 const cjs = Object.assign({}, config, {
diff --git a/packages/framer-motion-3d/tsconfig.json b/packages/framer-motion-3d/tsconfig.json
index 4b18232d3b..aa0dbd53fa 100644
--- a/packages/framer-motion-3d/tsconfig.json
+++ b/packages/framer-motion-3d/tsconfig.json
@@ -5,7 +5,7 @@
         "moduleResolution": "node",
         "isolatedModules": false,
         "importHelpers": true,
-        "jsx": "react",
+        "jsx": "react-jsx",
         "esModuleInterop": true,
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
diff --git a/packages/framer-motion/rollup.config.mjs b/packages/framer-motion/rollup.config.mjs
index 2cddd4a53a..3018ad0abe 100644
--- a/packages/framer-motion/rollup.config.mjs
+++ b/packages/framer-motion/rollup.config.mjs
@@ -28,6 +28,7 @@ const external = [
     ...Object.keys(pkg.dependencies || {}),
     ...Object.keys(pkg.peerDependencies || {}),
     ...Object.keys(pkg.optionalDependencies || {}),
+    "react/jsx-runtime",
 ]
 
 const pureClass = {
@@ -46,7 +47,7 @@ const umd = Object.assign({}, config, {
         exports: "named",
         globals: { react: "React" },
     },
-    external: ["react", "react-dom"],
+    external: ["react", "react-dom", "react/jsx-runtime"],
     plugins: [resolve(), replaceSettings("development")],
 })
 
@@ -63,7 +64,7 @@ const projection = Object.assign({}, config, {
         },
     },
     plugins: [resolve(), replaceSettings("development")],
-    external: ["react", "react-dom"],
+    external: ["react", "react-dom", "react/jsx-runtime"],
 })
 
 const umdProd = Object.assign({}, umd, {
diff --git a/packages/framer-motion/tsconfig.json b/packages/framer-motion/tsconfig.json
index c7c3562b66..0a745c4b11 100644
--- a/packages/framer-motion/tsconfig.json
+++ b/packages/framer-motion/tsconfig.json
@@ -5,7 +5,7 @@
         "moduleResolution": "node",
         "isolatedModules": false,
         "importHelpers": true,
-        "jsx": "react",
+        "jsx": "react-jsx",
         "esModuleInterop": true,
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,