Loading file error

[robmi10]

Im using next js and when im trying to render my riv file i get this error "Problem loading file; may be corrupt!

[Zachary Plata]

The error message should be clearer here. That rive file most likely may not be discoverable when your app is run.

If you place your rive/ folder in the public/assets/ folder of your NextJS app, you could set src as /assets/rives/pharao.riv and that might work.

[Ryan Parker]

I just ran into this as well and it seems like a duplicate of #90

[Michal Kurzewski]

i know its an old stuff, but ive been trying to fix that to work with React/Capacitor since we dont have /public as all the magic is happening on build. for us the fix was:

import { useRive } from '@rive-app/react-canvas';
import React from 'react';

import BouncyBall from '../images/rive/bouncy_ball.riv?url';

import styles from './riveWrapper.module.scss';

export default function RiveWrapper() {
  const { rive, RiveComponent } = useRive({
    src: BouncyBall,
    stateMachines: 'Motion',
    autoplay: false,
  });
  return (
    <div className={styles.riveContainer}>
      <RiveComponent onClick={() => rive && rive.play()} />
    </div>
  );
}

our setup is React/Capacitor/VIte - no additional config in vite or ts required just this ?url suffix