Skip to main content
21d ago

Runtime error: cannot get/set useStateMachineInput when triggering a function from riveEvent

I am building a game in Rive, with rive-app/react-canvas

šŸ‘‰ I have a function (handleNext) that fires an event (nextTrigger.fire();) from React to rive.

āœ… It works well when I trigger it it by pressing an HTML button outside of rive.

ā€¼ļø But when I trigger it after receiving an event from rive (riveEvent.data), it cannot get the useStateMachineInput (nextTrigger) and an error occurs (TypeError: Cannot read properties of null (reading 'fire').

I have spent hours trying to find a fix with no success. Would love to get some help šŸ„ŗ

const nextTrigger = useStateMachineInput(rive, "Game", "nextTrigger");

useEffect(() => {
    if (rive) {
      rive.on(EventType.RiveEvent, onRiveEventReceived);
    }
  }, [rive]);

const onRiveEventReceived = (riveEvent) => {
    const eventData = riveEvent.data;
    if (eventData.name === "eventJump") {
      handleNext();
    }    
  };

  const handleNext = () => {
    console.log("FIRE!");
    nextTrigger.fire();
  };

2 replies
(edited) 21d ago

One thing that'll break useStateMachineInput is if your main artboard doesn't have a state machine or that state machine doesn't immediately advance. For example, there's an entry without a timeline or there's a condition attached to the transition between the entry and the timeline. This is something we're planning to change in the future, but for now you can create a new timeline (it doesn't even need a keyframe) and connect it to Entry in a state machine layer.


If that's not the problem, would you mind sharing your .rev and, if possible, a Codesandbox example?

18d ago

Thanks a lot for your help
I'm going to try that šŸ¤ž