[🐞] Hydration mismatch when using multiple Framer-motion animated components

[heinthanth]

Which component is affected?

Qwik React

Describe the bug

I'm using framer motion to create Layout animation. But when using multiple qwikify$-ed components, I got hydration mismatch error. But that's not happening when only using ( hydrating ) 1 component. But the error is gone in production build tho.

Reproduction

https://stackblitz.com/edit/qwik-starter-ubpdgo

Steps to reproduce

• Run npm install and npm run dev.
• Wait for the components to be hydrated.
• Then, check console.

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Memory: 89.83 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Brave Browser: 109.1.47.171
    Safari: 16.2
  npmPackages:
    @builder.io/qwik: 0.16.2 => 0.16.2 
    @builder.io/qwik-city: 0.0.128 => 0.0.128 
    @builder.io/qwik-react: 0.2.1 => 0.2.1 
    undici: 5.14.0 => 5.14.0 
    vite: 4.0.3 => 4.0.3 

### Additional Information

_No response_

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-ubpdgo (Open reproduction)

[heinthanth]

I think data-projection-id are synchronized across multiple components. And that's causing hydration mismatch. But I still confused. If react roots are sandboxed, why values is shared across multiple components.

[heinthanth]

and also found that class ( ref ) name are the same for both components.