Removing react from bundle

Author: mattgperry

CHANGELOG.md

@@ -4,12 +4,16 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
-## [12.18.0] 2025-06-12
+## [12.18.0] 2025-06-13
 
 ### Added
 
 -   Support for defining a timeline position relative to the start of the most recently added animation (e.g. `<+0.5`, `<-1`)
 
+### Fixed
+
+-   Removed `"react"` import from `"motion-dom"`.
+
 ## [12.17.3] 2025-06-12
 
 ### Changed

packages/framer-motion/package.json

@@ -142,5 +142,5 @@
             "maxSize": "2.26 kB"
         }
     ],
-    "gitHead": "0d3c11b5f54647ecc5d1ee93e827651291fe7ce3"
+    "gitHead": "cddcc66430c5c96b2f560bb6a61160231f512c53"
 }

packages/motion-dom/package.json

@@ -21,7 +21,7 @@
     },
     "scripts": {
         "clean": "rm -rf types dist lib",
-        "build": "yarn clean && tsc -p . && rollup -c",
+        "build": "yarn clean && tsc -p . && rollup -c && node ./scripts/check-bundle.js",
         "dev": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"",
         "test": "jest --config jest.config.json --max-workers=2",
         "measure": "rollup -c ./rollup.size.config.mjs"

packages/motion-dom/scripts/check-bundle.js

@@ -0,0 +1,11 @@
+const path = require("path")
+const { readFileSync } = require("fs")
+
+const file = readFileSync(
+    path.join(__dirname, "../", "dist", "index.d.ts"),
+    "utf8"
+)
+
+if (file.includes(`"react"`)) {
+    throw new Error("DOM bundle includes reference to React")
+}

packages/motion-dom/src/node/types.ts

@@ -1,5 +1,4 @@
 import type { BoundingBox, Box, Point } from "motion-utils"
-import { RefObject } from "react"
 import type {
     DOMKeyframesDefinition,
     InertiaOptions,
@@ -559,7 +558,7 @@ export type ViewportEventHandler = (
 ) => void
 
 export interface ViewportOptions {
-    root?: RefObject<Element | null>
+    root?: { current: Element | null }
     once?: boolean
     margin?: string
     amount?: "some" | "all" | number
@@ -641,7 +640,7 @@ export interface MotionNodeDraggableOptions {
      * }
      * ```
      */
-    dragConstraints?: false | Partial<BoundingBox> | RefObject<Element | null>
+    dragConstraints?: false | Partial<BoundingBox> | { current: Element | null }
 
     /**
      * The degree of movement allowed outside constraints. 0 = no movement, 1 =

packages/motion-dom/src/utils/transform.ts

@@ -42,9 +42,6 @@ export interface TransformOptions<T> {
  * Every value in the output range must be of the same type and in the same format.
  *
  * ```jsx
- * import * as React from "react"
- * import { transform } from "framer-motion"
- *
  * export function MyComponent() {
  *    const inputRange = [0, 200]
  *    const outputRange = [0, 1]
@@ -79,9 +76,6 @@ export function transform<T>(
  * Every value in the output range must be of the same type and in the same format.
  *
  * ```jsx
- * import * as React from "react"
- * import { Frame, transform } from "framer"
- *
  * export function MyComponent() {
  *     const inputRange = [-200, -100, 100, 200]
  *     const outputRange = [0, 1, 1, 0]

packages/motion/package.json

@@ -95,5 +95,5 @@
             "optional": true
         }
     },
-    "gitHead": "0d3c11b5f54647ecc5d1ee93e827651291fe7ce3"
+    "gitHead": "cddcc66430c5c96b2f560bb6a61160231f512c53"
 }