motion package breaks with "isValidProp is not a function"

[punkpeye]

Describe the bug

I am trying to use http://npmjs.com/motion package.

It looks like they are doing something weird to import ESM module.

function loadExternalIsValidProp(isValidProp) {
	if (!isValidProp) return;
	shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
}
/**
* Emotion and Styled Components both allow users to pass through arbitrary props to their components
* to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
* of these should be passed to the underlying DOM node.
*
* However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
* as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
* passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
* `@emotion/is-prop-valid`, however to fix this problem we need to use it.
*
* By making it an optionalDependency we can offer this functionality only in the situations where it's
* actually required.
*/
try {
	/**
	* We attempt to import this package but require won't be defined in esm environments, in that case
	* isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
	* in favour of explicit injection.
	*/
	loadExternalIsValidProp((init_is_prop_valid_motion(), __toCommonJS(is_prop_valid_motion_exports)).default);
} catch {}

Here isValidProp is {} when it should be either undefined or function.

Reproduction

https://stackblitz.com/edit/vitejs-vite-9wqpscbo?file=index.html

Steps to reproduce

Just use motion

System Info

What's the point of this question if stackblitz is provided?

Used Package Manager

pnpm

Logs

entry.client-JHbadgic.js:3923 TypeError: isValidProp is not a function
    at shouldForward (proxy-DMFO4gzA.js:323:76)
    at filterProps (proxy-DMFO4gzA.js:357:7)
    at useRender (proxy-DMFO4gzA.js:1032:25)
    at MotionComponent (proxy-DMFO4gzA.js:600:15)
    at renderWithHooks (entry.client-JHbadgic.js:2515:21)
    at updateForwardRef (entry.client-JHbadgic.js:4034:15)
    at beginWork (entry.client-JHbadgic.js:4614:20)
    at performUnitOfWork (entry.client-JHbadgic.js:6412:14)
    at workLoopSync (entry.client-JHbadgic.js:6316:36)
    at renderRootSync (entry.client-JHbadgic.js:6300:5)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs and the Rolldown-related guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[punkpeye]

Tagging motion maintainer as well @mattgperry

[punkpeye]

If anyone else stumbles across this, you can work around this issue with the following patch:

diff --git a/dist/cjs/react-client.js b/dist/cjs/react-client.js
index f17f6dd91a27e4b7ff84fddf3da4a62b565507d8..6d84909f0538134961bc6686897264e63c25bebe 100644
--- a/dist/cjs/react-client.js
+++ b/dist/cjs/react-client.js
@@ -8722,7 +8722,7 @@ function isValidMotionProp(key) {
 
 let shouldForward = (key) => !isValidMotionProp(key);
 function loadExternalIsValidProp(isValidProp) {
-    if (!isValidProp)
+    if (typeof isValidProp !== 'function')
         return;
     // Explicitly filter our events
     shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
diff --git a/dist/cjs/react-m.js b/dist/cjs/react-m.js
index 684d3b5b0fb6f4f2f5495afb51ff3d2d45161cc8..40477ed53de9d8469415d820de91859b97466189 100644
--- a/dist/cjs/react-m.js
+++ b/dist/cjs/react-m.js
@@ -964,7 +964,7 @@ function isValidMotionProp(key) {
 
 let shouldForward = (key) => !isValidMotionProp(key);
 function loadExternalIsValidProp(isValidProp) {
-    if (!isValidProp)
+    if (typeof isValidProp !== 'function')
         return;
     // Explicitly filter our events
     shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
diff --git a/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs b/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs
index 3646ba2f559c6df42f3952af9593a047daa5cc2d..61d2f5621b0cdd01a9da6e301789896fe4ee234f 100644
--- a/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs
+++ b/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs
@@ -2,7 +2,7 @@ import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';
 
 let shouldForward = (key) => !isValidMotionProp(key);
 function loadExternalIsValidProp(isValidProp) {
-    if (!isValidProp)
+    if (typeof isValidProp !== 'function')
         return;
     // Explicitly filter our events
     shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);

[punkpeye]

@mattgperry this would be a good addition to motion regardless of whether this is an issue with rolldown.

[sapphi-red]

I wrote the reason why this happens here: rolldown/rolldown#4051 (comment)

On second thought, maybe the mocked module should be throw new Error('failed to resolve ...') instead of export default {}.

[reify-benjamin-solum]

FWIW, the same issue occurs in our codebase when attempting to call the <motion.div /> component from import { motion } from 'motion/react';. Can reproduce the issue in the latest version of motion.

The commonjsOptions steps @sapphi-red outlined above also didn't seem to solve the issue in our codebase. However, simply installing @emotion/is-prop-valid as a dependency did resolve the issue.

I definitely agree with the comment above, @mattgperry , it'd be great to add a typeof function check.

[mattgperry]

Yeah I might also see about just removing this, perhaps it’s better to do this manually rather than having an optional external

…

On Wed, 11 Jun 2025 at 16:29, reify-benjamin-solum ***@***.***> wrote: *reify-benjamin-solum* left a comment (vitejs/rolldown-vite#165) <#165 (comment)> FWIW, the same issue occurs in our codebase when attempting to call the <motion.div /> component from import { motion } from 'motion/react';. Can reproduce the issue in the latest version of motion. The commonjsOptions steps @sapphi-red <https://github.com/sapphi-red> outlined above also didn't seem to solve the issue in our codebase. However, simply installing @emotion/is-prop-valid as a dependency did resolve the issue. I definitely agree with the comment above <#165 (comment)>, @mattgperry <https://github.com/mattgperry> , it'd be great to add a typeof function check. — Reply to this email directly, view it on GitHub <#165 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB34WKT5E5DQOB6U3ABXTSD3DA4LFAVCNFSM6AAAAAB44PGPZ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNRSHEYTEMBTGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[reify-benjamin-solum]

@mattgperry in lieu of a long-term fix, it looks like pivoting L9 in filter-props.ts to the below would offer some immediate relief. Happy to open up a PR if that would help.

if (typeof isValidProp !== 'function') return

[mattgperry]

Yes please, that would be great!

…

On Wed, 11 Jun 2025 at 16:41, reify-benjamin-solum ***@***.***> wrote: *reify-benjamin-solum* left a comment (vitejs/rolldown-vite#165) <#165 (comment)> @mattgperry <https://github.com/mattgperry> in lieu of a long-term fix, it looks like pivoting L9 in filter-props.ts <https://github.com/motiondivision/motion/blob/d9d6ac186d07eabd02e926b60986f7978d48eac4/packages/framer-motion/src/render/dom/utils/filter-props.ts#L9> to the below would offer some immediate relief. Happy to open up a PR if that would help. if (typeof isValidProp !== 'function') return — Reply to this email directly, view it on GitHub <#165 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB34WKVN5SPCU2ULRAG4Q2L3DA5ZVAVCNFSM6AAAAAB44PGPZ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNRTGEYTANJTGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>