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",