preact-motion does not work with Preact X due to the change in this.props.children not always being an array
this.props.children is not guaranteed to be an array and the preact-motion library relies on it being an array.
reference: https://preactjs.com/guide/v10/upgrade-guide/#propschildren-is-not-always-an-array
Error when switching to Preact X:
TypeError: this.props.children[0] is not a function
to fix this, use the toChildArray method from preact in the following functions:
Motion.prototype.render = function render() { var children = preact.toChildArray(this.props.children); return children[0](this.state.currentStyle); };
StaggeredMotion.prototype.render = function render() { var children = preact.toChildArray(this.props.children); return children[0](this.state.currentStyles); };
TransitionMotion.prototype.render = function render() { var hydratedStyles = rehydrateStyles(this.state.mergedPropsStyles, this.unreadPropStyles, this.state.currentStyles); var children = preact.toChildArray(this.props.children); return children[0](hydratedStyles); };