Next.js 14 cannot load any .riv file

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!

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.