Rive component not rendering in NextJS

Question

Rive component not rendering in NextJS

felipesses opened this issue a year ago · comments

Felipe Magalhães commented a year ago

Hi, I am using NextJs in my project and my Rive component is not rendering,

I have imported the @rive-app/react-canvas package and I'm using the current version, "^3.0.38"

Here's my folder

The component

It seems like the canvas is rendering, but it doesn't show anything

Arthur Vivian · Answer 1 · Wed Mar 15 2023 22:25:02 GMT+0800 (China Standard Time)

Hey @felipesses

Your canvas height is being set to 0. Do you know what could be causing that?

Could you share some code so I could reproduce this locally? A link to a github repo I could clone would be ideal.

Felipe Magalhães · Answer 2 · Wed Mar 15 2023 23:15:54 GMT+0800 (China Standard Time)

Hey @felipesses

Your canvas height is being set to 0. Do you know what could be causing that?

Could you share some code so I could reproduce this locally? A link to a github repo I could clone would be ideal.

Hey! I have found the issue. I had to set the height of the component otherwise it renders so small that I couldn't see it 😅 thanks for the reply!

Rafael Klynger · Answer 3 · Thu Apr 27 2023 18:58:24 GMT+0800 (China Standard Time)

I'm having the same issue. It feels limiting having to set a fixed height to make it work, and it doesn't work if the user resizes the window.