Next.js 14 cannot load any .riv file

[ShortyLogos]

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!

[bricemacias]

Same problem. Only solution I found for now is to use:

"@rive-app/react-canvas": "^4.6.2",
"@rive-app/canvas": "^2.9.2",

those work for me in the meantime

[tlthiem]

works for me. Also highly doubt this has anything to do with next.js. Its just serving static files after all.

[bricemacias]

I don't know but with last versions of rive in next js, if I use

    "next": "^14.2.3",
    "@rive-app/canvas": "^2.15.6",
    "@rive-app/react-canvas": "^4.9.5",

The animations don't load and I get this error in the console:

app-index.js:33 TypeError: a.startsWith is not a function
    at Sa (rive.js:685:12)
    at Ya (rive.js:728:73)
    at eval (rive.js:3273:3)
    at Module.eval (rive.js:3277:3)
    at RuntimeLoader.loadRuntime (rive.js:3825:67) [...]

works fine with those versions in my case:

"next": "^14.2.3",
"@rive-app/react-canvas": "^4.6.2",
"@rive-app/canvas": "^2.9.2",

[ChrisNSki]

I'm moving from Vite to Next, and the latest is working in our Vite project, but not with the latest of next.js 15 (we are going to try 14 too)

receiving this error:

Console Error
Problem loading file; may be corrupt!

Call Stack
Next.js
createUnhandledError
./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/console-error.js
handleClientError
./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js
console.error
./node_modules/next/dist/client/components/globals/intercept-console-error.js
eval
node_modules@rive-app\canvas\rive.js (5259:1)

I also tried the older versions suggested above, but have not had luck, not sure if this is the best place though since this is 15 and not 14, and 15 is new.

[ChrisNSki]

To follow-up on this, we figured out it was a CORS issue, it is working on next 15 for us, apologies for the false flag.