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

Rending issue on production

3lonious opened this issue · comments

everything works localy but when i go live there is nothing rendering.

@3lonious Hi 👋 , caught your notes from your comments on other issues, sorry to hear you're getting blocked here!

You may have caught it from the other thread #97 (comment)

But this library does need to make a request out to retrieve a WASM file that really drives the rendering for the JS/React libs. I think it makes sense to look at a solution to make it so you can retrieve the file/store the file on your own and supply it to the high-level API, but until then, I'd be curious to learn more about why it's not rendering when you build/deploy. Do you have any network request issues when it tries to retrieve the WASM in logs of any kind (i.e is it getting blocked by your web server?)

ok so here are screen shots.. both localy, you can see it render.. and then production where it wont render, but network requests look like they are comming thru 200...

Also ive set this up with useRive, and useStateMachine or whatever and exact same issue...

is there anything on the backend that needs setting up? im deploying thru github actions and amplify aws, would love to get these animiations working..

Production

Screen Shot 2022-07-01 at 4 40 44 PM

@3lonious Rive doesn't require any server-side or "backend" work, as it's a library meant to work with your client-side. So a few follow-ups:

Do you mind sharing any snippets of code on how you're setting it up? Are you hosting your .riv file?
Any console errors?

import Turbo from "../../../assets/rive/65-358-iron-giant-demo.riv";

import Rive, { useRive, useStateMachineInput } from "rive-react";

const { rive, RiveComponent } = useRive({
src: Mixer,
autoplay: true,
})

import Turbo from "../../../assets/rive/65-358-iron-giant-demo.riv";

import Rive, { useRive, useStateMachineInput } from "rive-react";

const { rive, RiveComponent } = useRive({
src: Mixer,
autoplay: true,
})

ok i found errors in console

Screen Shot 2022-07-01 at 7 27 15 PM

Screen Shot 2022-07-01 at 7 27 32 PM

Scree
<img width=

n Shot 2022-07-01 at 7 27 43 PM" src="https://user-images.github

Screen Shot 2022-07-01 at 7 27 53 PM

usercontent.com/46793692/176983428-3201162e-4e5e-4622-901a-7b03d42aa06b.png">

also links to our audio mastering platform if it helps

https://chosenmasters.com/

https://pro.chosenmasters.com/register

Any luck here? is there something that needs extra config?

just realized you put this on the other thread... im gonna give this a try thanks :)
Screen Shot 2022-07-05 at 10 03 36 AM

my solution
import Rive from "rive-react";
< Rive autoplay="true" src="https://public.rive.app/community/runtime-files/65-358-iron-giant-demo.riv / >

            you can get the url for src="" by looking thru community animations, inspect element, go to network tab and copy .riv url from network request

Screen Shot 2022-07-05 at 1 34 32 PM

Screen Shot 2022-07-05 at 1 34 38 PM

Closing this since the issue seems to have been resolved