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!

[zplata]

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.

[ryparker]

I just ran into this as well and it seems like a duplicate of https://github.com/rive-app/rive-react/issues/90

[MichalKurzewski]

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

[Maclay74]

For some reason this solution doesn't work with NextJS, it gives 404 if you import rives like that

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

I added a rule for webpack to handle this type of files, but it didn't work too.

config.module.rules.push({
      test: /\.riv/,
      loader: 'file-loader',
    })

[MichalKurzewski]

On some apps this doesn't work for me too. On few of them also changing the riv extension to SVG (it will still work as animation) fixes that , which is super weird.