CuratedTypeScriptVite 8local

"isValidProp is not a function" using motion/framer-motion with rolldown-vite

Problem

Using the `motion` (or `framer-motion`) package, styled components built on `motion.div` throw at runtime because `isValidProp` (loaded from the optional peer dependency `@emotion/is-prop-valid`) isn't a function. The library's optional-dependency loader guards with `if (!isValidProp) return`, but under rolldown's CJS interop, a failed/mocked `require` resolves to a non-function truthy value (e.g. `{}`) instead of `undefined`, so the guard doesn't trigger and the mocked value gets called directly.

Solution

typescript

Root cause is in rolldown's CJS-optional-dependency interop (tracked at rolldown/rolldown#4051); the proper fix shipped in vitejs/rolldown-vite#167 shortly after this issue (upgrade to the rolldown-vite release following it — v0.x.x post mid-June-2025 builds). Practical workaround usable on any version: install `@emotion/is-prop-valid` as an explicit direct dependency in your project (not just relying on it as motion's optional peer dep) so it resolves to the real module instead of a mocked stub. Upstream, motion also patched its own guard to `if (typeof isValidProp !== 'function') return` (motiondivision/motion#3256) which avoids the issue regardless of bundler.