[BUG] React DOM Server Fails to Render Animated Elements

Issue

When you call ReactDOMServer.renderToStaticMarkup() with a component that uses framer-motion to render it fails to render those elements but renders non-animated elements correctly. Even with passing { type: false } to the transition it still fails.

Example

• Repo: https://github.com/amcdnl/reaviz-ssr
• Code: https://github.com/jask-oss/reaviz/blob/master/src/BarChart/BarSeries/Bar.tsx#L328-L347

Notes on example:

• This example uses puppeteer but it also produced the same result with nextjs
• All of the elements that are not rendered by motion are rendered fine (you can see the axis) but the motion.rect are not rendered.

Versions

"react": "16.9.0"
"react-dom": "16.9.0"
"framer-motion": "^1.6.7"

[mattgperry]

Hmm that’s odd, we have SSR-specific tests that work fine. I’ll take a look.

[mattgperry]

If I passed animate I got the same result, a <rect>