Bad Header, Problem loading file; may be corrupted!

[Avanish Patel]

I'm trying to create Spinner component using .riv file, when I add src as local file or via CDN when I render the component in consumer application it fails with following errors.

It renders correctly in component library as expected but error occurs when it's rendered in consuming react application.

Following are the sources where it shows error in the browser.

[curtk]

I'm getting the same issue when trying to load the file from the local "src" directory in "Create React App."

[curtk]

So I found the problem and solution...

You need to place the .riv file into the public folder, not the src folder.

When the .riv file is in the public folder, you can "src" it directly.

Example:

const Logo = () => {
  const { RiveComponent } = useRive({
    src: "logo.riv",
    autoplay: true,
    onLoadError: () => console.log("ERROR LOADING RIVE"),
    onLoad: () => console.log("LOADED RIVE"),
  })
  return ( 
    <RiveComponent />
  );
};

export default Logo;```

In this example, logo.riv lives in public/logo.riv

[Avanish Patel]

@curtk Thanks for your response. Here I’m trying to create common component that uses .riv file and bundle that using rollup js. I couldn’t find any good documentation that walk met through how to bundle this .riv file for components that can be used in other projects.

[Hemnath0075]

I am deploying My react app in amplify Eventhough I moved to public in localhost its working but after deploying rive animation is giving this error :- Bad Header, Problem loading file; may be corrupted!