SSR and (Framer) Motion

Is there any idiomatic way to use Motion (previously Framer Motion) with TanStack Start without getting hit by and SSR error ?

I get this error with react 19

Uncaught Error: Switched to client rendering because the server rendering errored:

Export named 'createContext' not found in module '/Users/notkamui/Dev/time-recorder/node_modules/motion/src/react.ts'.

Uncaught Error: Switched to client rendering because the server rendering errored:

Export named 'createContext' not found in module '/Users/notkamui/Dev/time-recorder/node_modules/motion/src/react.ts'.

(React 18 only shows the second paragraph)

Motion should be perfectly isomorphic since it works perfectly fine with Nextjs

use client

use client

components (which are SSRed then hydrated, like with Start)

To be precise, this error is cause by simply using anything imported from

"motion"

"motion"

in a component. That means that even using a guard like

if (typeof document === 'undefined') return null

if (typeof document === 'undefined') return null

before using said motion component doesn't solve the issue (is this a codesplitting issue then ?)

Thank you in advance

TanStack•16mo ago•

5 replies

rubber-blue

SSR and (Framer) Motion

Is there any idiomatic way to use Motion (previously Framer Motion) with TanStack Start without getting hit by and SSR error ?

I get this error with react 19

Uncaught Error: Switched to client rendering because the server rendering errored:

Export named 'createContext' not found in module '/Users/notkamui/Dev/time-recorder/node_modules/motion/src/react.ts'.

Uncaught Error: Switched to client rendering because the server rendering errored:

Export named 'createContext' not found in module '/Users/notkamui/Dev/time-recorder/node_modules/motion/src/react.ts'.

(React 18 only shows the second paragraph)

Motion should be perfectly isomorphic since it works perfectly fine with Nextjs

use client

use client

components (which are SSRed then hydrated, like with Start)

To be precise, this error is cause by simply using anything imported from

"motion"

"motion"

in a component. That means that even using a guard like

if (typeof document === 'undefined') return null

if (typeof document === 'undefined') return null

before using said motion component doesn't solve the issue (is this a codesplitting issue then ?)

Thank you in advance

SSR and (Framer) Motion

Similar Threads

SSR and (Framer) Motion

Similar Threads

Similar Threads

Similar Threads