Next.js 14 cannot load any .riv file

Open
#249 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
next.js, react, typescript
Domain
frontend, web-dev

Research direction

Start with the reported useRive call in the component and inspect how Next.js 14 serves public/rive/cube.riv, including the response received by the browser. Compare that behavior with the working external source and verify that the .riv file loads without “Bad header” or “Problem loading file” errors.

Written by the indexing model from the issue text.

Description

NextJS: 14.1.4
@rive-app/react-canvas": "^4.9.0"

I already used Rive in other React apps with Vite and everything was working as intended. However, I cannot for the life of me makes things work with Next.js in that regard. Some Next.js devs seems to don't have any problem importing .riv files from public folder and I just don't understand what is different on my side.

I tried many solutions and none seems to work. I always get the dreaded "Bad header" and "Problem loading file; may be corrupt!".

The only way a Rive component seems to load is if I load it from an external source. The webpack or turbo bundler doesn't seems to find any .riv files in my public directory.

Here's what my code currently looks like :

"use client";

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

export default function RiveCubeSautant() {
  const STATE_MACHINE_NAME = "State Machine 1";
  const INPUT_NAME = "Pressed";

  const { RiveComponent, rive } = useRive({
    src: "/rive/cube.riv",
    stateMachines: STATE_MACHINE_NAME,
    artboard: "Cube",
    autoplay: true,
    onLoadError: () => console.log("ERROR LOADING CUBE"),
  });

  return (
    <div style={{ height: "500px", width: "500px" }}>
      <RiveComponent />
    </div>
  );
}

I tried "rive/cube.riv" as an alternative or again importing it as module with the url-loader and the webpack rules. Nothing works. Is there any Next.js dev that have a workaround? I am at wits end here... Many thanks!

Dominant language
TypeScript
Stars
1.2k
Forks
58
Avg merge
3h 23m
Merged PRs (30d)
6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from rive-app/rive-react

All issues in rive-app/rive-react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.