React-Motion Spring component causing Invariant Violation

Question

I have (had) a working React component that just displayed a small string wrapped in a header tag. Since it was displaying properly, I am almost positive my import/export is set up correctly. When I try to add a <Spring /> component to my render() method, I am presented with:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Animation.

Why would the <Spring> component cause this to happen when everything was working correctly before? My code below:

import React from 'react';
import { Spring } from 'react-motion';

class Animation extends React.Component {
  constructor(props){
      super(props);
  }

  render() {
    return (
      <Spring defaultValue={0} endValue={120}>
        {val => {
          let style = {
            height: val,
            position: 'absolute'
          }
          return <div style={style}><h1>Hi!</h1></div>
        }}
      </Spring>
    )
  }
}

export default Animation;

Answer 1

react-motion is no longer expose Spring function that takes props and context to be used as React Component, instead you got three functions that you can use Motion, StaggeredMotion, and TransitionMotion in addition to spring function (with lowercase 's') that takes value and config. Check the latest docs on react-motion repo on Github.