2mo ago

Unhandled Runtime Error

My animation works on Rive app without any problem but when I send it to the developers for using on our website, then get this error:
Unhandled Runtime Error TypeError: Cannot set properties of undefined (setting 'loaded') Call Stack Rive node_modules/@rive-app/canvas/rive.js (5106:1) Next.js

Code:
'use client'; import { Rive, useRive } from '@rive-app/react-canvas'; import radar from './public/Radarfinal.riv'; const RadarAnimation = () => { const { RiveComponent, RiveRef } = useRive({ src: radar, autoplay: true, onLoadError: () => console.log("ERROR LOADING Radar"), }); return ( <div style={{ width: '100%', height: '100%' }}> <RiveComponent ref={RiveRef} /> </div> ); }; export default RadarAnimation;

2 replies

2mo ago

RadarAnimation.riv

888 KB

2mo ago

It looks like there are 2 issues.

It looks like the .riv is called RadarAnimation, but in the code it's called RadarFinal
Instead of importing the .riv and setting the src to src: radar, just add the string like this: src: '/RadarAnimation.riv'

Here's the full code that's working for me.

import { Rive, useRive } from '@rive-app/react-canvas'

const RadarAnimation = () => {
  const { RiveComponent, RiveRef } = useRive({
    // You shouldn't need the "./public" prefix
    src: '/RadarAnimation.riv',
    autoplay: true,
    onLoadError: () => console.log('ERROR LOADING Radar'),
  })
  return (
    <div style={{ width: '100%', height: '100%' }}>
      {' '}
      <RiveComponent ref={RiveRef} />{' '}
    </div>
  )
}
export default RadarAnimation