rive-app / rive-react

React runtime for Rive

Home Page:https://rive-app.github.io/rive-react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bad header rive_canvas.js:2936 warning & Problem loading file; may be corrupt

Jackdaw16 opened this issue · comments

I have a LoadingComponent with rive, the .riv file is placed in the root of the public folder.

image

This same component is called from two other components, the animation works correctly in the first component, but not in the second, the only clue I have are these two warnings.

image

I'm not sure if I'm doing something wrong or if it's a bug from the library itself.

Hey @Jackdaw16, it's hard to tell exactly what the issue could be from your sample code, but I don't think it's that your .riv file is actually corrupt if it's working in one component. Not sure if this is a library bug or not but I suspect there could be some issue with the path in the src section of the params and the runtime is having issues loading the file. If that is the case we should have a better error message!

How are you running/bundling your app? Would it be possible to create a small github repo that reproduces this issue with the two components? I've tried to reproduce the issue you've seen myself but can't seem to.

Hi, Here I attach some screenshots of how I have structured the application. The application is running with craco, for Tailwindcss. Between today or tomorrow I will do a simulation with a small project and create a Github repository.

what is indicated in red is where the library is used, the components and where the .riv is located.
image

I was try to reproduce the same error in a smaller project without getting the same result.
But, I tried such a simple thing, it seems silly, but it worked out.
I added two points to the route and it worked perfectly.

image

I don't really know why, because in the example I made with a single point, the animation worked just the same.
https://github.com/Jackdaw16/example-rive

but thank you very much and a really useful library, actually teach a little course on this library and Rive.