Motion: [BUG] React DOM Server Fails to Render Animated Elements

[amcdnl]

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]

@amcdnl Are you still running into this?

[amcdnl]

@InventingWithMonster - Yes it is still not working. Take a look at the repo link above, I have updated it to latest everything.

[mattgperry]

Thanks

[amcdnl]

Oh code link is updated to: https://github.com/reaviz/reaviz/blob/master/src/BarChart/BarSeries/Bar.tsx

[mattgperry]

Updated tests to specifically test with renderToStaticMarkup and still not finding a problem with this https://github.com/framer/motion/commit/b39009ca0b68fc0f44ca444c3a7b8f558230cb72

If I get time next week I'll see if I can clone your project and take a closer look

[mattgperry]

Pulling the linked repo and changing the return of Component to motion.rect outputs a <rect> element. The tests in Motion also verify that SVG and HTML elements are both rendered correctly with renderToStaticMarkup.

I don't know exactly what's wrong here but I don't have the time to look into it any further, given the above I can assume the bug here isn't specifically to do with Motion.

[amcdnl]

@InventingWithMonster - Can you be more clear on what you changed from Component to motion.rect?

[mattgperry]

The returned createElement of Component in component.tsx

[amcdnl]

What if you define animations and then disable like I did? https://github.com/reaviz/reaviz/blob/master/src/BarChart/BarSeries/Bar.tsx#L483

[mattgperry]

If I passed animate I got the same result, a