ant-design/ant-motion

nextjs13 Error with `rc-queue-anim`.

Closed this issue · 1 comments

unrjjlmn20185 commented

I'm new to Next.js and QueueAnim. Could you please help me figure out if this issue is a bug or if it's something I'm doing wrong? Thanks!

Env

"next": "13.4.12",
"rc-queue-anim": "^2.0.0",
"rc-scroll-anim": "^2.7.6",
"react": "18.2.0",
"react-dom": "18.2.0",

Use

'use client'

import QueueAnim from 'rc-queue-anim'
import { OverPack } from 'rc-scroll-anim'
import React from 'react'

const AnimatedInViewQueue = ({ children }: { children: React.ReactNode }) => {
  return (
    <OverPack playScale="0.3">
      <QueueAnim key="queue" type="bottom" leaveReverse interval={50}>
        {children}
      </QueueAnim>
    </OverPack>
  )
}

export default AnimatedInViewQueue

Error

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Did not expect server HTML to contain a <div> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

17862974826 commented