Skip to content
This repository has been archived by the owner on Dec 10, 2019. It is now read-only.

(0 , _reactMotion2.default) is not a function in the line that calls spring. #86

Open
DonGiulio opened this issue Oct 20, 2017 · 1 comment

Comments

@DonGiulio
Copy link

Hello,

I've installed react-motion and react-motion-ui-pack in my project, and I would like to get my LogoPage component to animate out when unmounted.

This is my LogoPage component:

import PropTypes from "prop-types";
import React from "react";

import ReactOnRails from "react-on-rails";
import LocationContainer from "../containers/LocationContainer";
import EttandoLogo from "./app.svg";

import Transition from "react-motion-ui-pack";
import spring from "react-motion";

const LogoPage = () => {
  return (
    <Transition
      component={false} // don't use a wrapping component
      enter={{
        opacity: 1,
        translateY: spring(0, { stiffness: 400, damping: 10 })
      }}
      leave={{
        opacity: 0,
        translateY: 250
      }}
    >
      {
        <div className="logo-page">
          <AppLogo />
          <div className="row">
            <div className="col-md-6 mx-auto">
              <LocationContainer />
            </div>
          </div>
        </div>
      }
    </Transition>
  );
};

LogoPage.propTypes = {};

export default LogoPage;

it's mostly the boilerplate from the example, applied to my markup.

in the line 17: translateY: spring(0, { stiffness: 400, damping: 10 })
throws this error in the js console:

Uncaught TypeError: ReactOnRails encountered an error while rendering component: App.
Original message: (0 , _reactMotion2.default) is not a function
    at LogoPage (LogoPage.js?93a7:17)
    at eval (ReactCompositeComponent.js?d2b3:303)
    at measureLifeCyclePerf (ReactCompositeComponent.js?d2b3:73)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js?d2b3:302)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js?d2b3:277)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?d2b3:185)
    at Object.mountComponent (ReactReconciler.js?399b:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?d2b3:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?d2b3:255)
    at Object.mountComponent (ReactReconciler.js?399b:43)
@lynden
Copy link

lynden commented Oct 23, 2017

Try using a named import for spring e.g. import { spring } from "react-motion";

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants