"File Instance Already Deleted" Error in Next.js HMR

[Farrel Darian]

When using useRive in Next.js, it always throw "BindingError: File instance already deleted" when performing Hot-Module Reload or any change to file in Next.js development server.

[Ben Talbot]

Also seeing this issue.

Seem to be able to reliably get the app working again by saving the file 3 times each time I make a change, but very disruptive nonetheless.

[Isaac Donoghue]

Getting this same error during HMR on a React 17 + Vite 4 project

[Luna]

How were you able to import the .riv file into next js

[Zachary Plata]

@farreldarian would adding the // @refresh reset to the useRive hook here help? We clean up Rive instances once the component unmounts to clear up all C++-created objects downstream from a WASM dependency and so any Rive-based component should hard refresh state with HMR.

As an immediate solution, you might try isolating the use of Rive in your projects to its own component with the // @refresh reset comment at top, and just add that custom passthrough component wherever you had it before

[Geek]

@zplata Still getting the same error and i am using the @rive-app/react-canvas package

[Farrel Darian]

n immediate solution, you might try isolating the use of Rive in your projects to its own component with the // @refresh reset comment at top, and just add that custom passthrough component wherever you had it before

Hey, sorry for the delay. Where should I put it? tried one at the beginning of the file, on top of useRive hook, and on top of the component, has no effect.

[Dustin A]

I'm seeing this issue as well in Next.js. I have the Rive animation in an isolated component with a few other things, and the // @refresh reset directive at the top.

I'm using the useRive hook from @rive-app/react-canvas

[Sean Robertson]

Isolated component approach is working for me with @rive-app/react-canvas 3.0.35 and next 13.1.1 with // @refresh reset as the very first line of the file. The animation doesn't replay (not sure if that'd be expected) but at least the error doesn't show up.

// @refresh reset

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

export default function HomeAnimation() {
    const { rive, RiveComponent } = useRive({
        src: "/nuve_instances.riv",
        autoplay: true,
    })

    return <RiveComponent id="animation" className="w-[600px] h-[400px]" />
}