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'.
(React 18 only shows the second paragraph)
Motion should be perfectly isomorphic since it works perfectly fine with Nextjs 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" in a component. That means that even using a guard like 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 😄5 Replies
genetic-orange•10mo ago
can you please create a GitHub issue including a minimal example so we can debug this?
wee-brownOP•10mo ago
It seems I cannot reproduce the bug in a minimal setting. At least now I know it's a more complex problem than I thought, or something else entirely...
I won't make an issue yet, nor ask for formal help, but if anyone else wants to check the actual code I am working with:
https://github.com/notKamui/time-recorder/blob/main/app/components/ui/form-input.tsx
the motion module is used at the bottom of this file. The concerned pages are /sign-up and /login
GitHub
time-recorder/app/components/ui/form-input.tsx at main · notKamui/t...
Contribute to notKamui/time-recorder development by creating an account on GitHub.
wee-brownOP•10mo ago
I have create a
/test route (on the repo) with only a form and the motion component with animate presence.
I still suspect a code splitting issue, but i cannot find by what it is caused
https://github.com/notKamui/time-recorder/blob/main/app/routes/test.tsxGitHub
time-recorder/app/routes/test.tsx at main · notKamui/time-recorder
Contribute to notKamui/time-recorder development by creating an account on GitHub.
wee-brownOP•10mo ago
@Manuel Schiller I have identified the minimal error setup and created an issue
https://github.com/TanStack/router/issues/2904
GitHub
[Start] Bun + (Framer) Motion + TS Start cause an SSR error · Issue...
Which project does this relate to? Start Describe the bug When running the dev server with bun explicitly (bunx -b vinxi dev), Motion (previously Framer Motion) cause an error at runtime, which is ...
wee-brownOP•10mo ago
TLDR: running the dev server with bun (bunx -b vinxi dev) causes an error when using motion components