I got an error when I use flipTo function in a 'react' project

[Jickey]

my react component code:

const FlipNumber = ({ number: realNumber, className }) => {
  const ref = useRef();
  const flipRef = useRef(null);
  useEffect(() => {
    if (!flipRef.current) {
      flipRef.current = new Flip({
       node: ref.current,
        from: 0,
        to: realNumber,
        duration: 1.5,
        separator: ',',
      });
    } else {
      // error when flipTo runs 
      flipRef.current.flipTo({ to: realNumber });
    }
  }, [realNumber]);
  return (
   <div
      ref={ref}
    />
  );
};

[gaoryrt]

I think this will work:
https://codesandbox.io/s/snowy-tdd-gf9hp?file=/src/App.js:89-488

const FlipNumber = ({ number: realNumber }) => {
  const ref = useRef();
  const flipRef = useRef(null);
  useEffect(() => {
    flipRef.current = new Flip({
      node: ref.current,
      from: 0,
      to: realNumber,
      duration: 1.5,
      separator: ","
    });
  }, []);
  useEffect(() => {
    flipRef.current.flipTo({ to: realNumber });
  }, [realNumber]);

  return <div ref={ref} />;
};

[Jickey]

Yeah. It does work in my 'vite' demo project but I failed in my production project, which meas it may be an incompatibility problem. Forget it. Thanks very much for your reply !

[xmsz]

any updated?

[gaoryrt]

@xmsz I believe this works effectively

[xmsz]

@xmsz I believe this works effectively

[edgar-505]

@gaoryrt still error...

[gaoryrt]

@gaoryrt still error...
Please provide a minimal reproduction.

[TanYiBing]

似乎是数字位数不一样，所以提示 Cannot read properties of undefined (reading 'childNodes')