Jump to content
Search Community

TypeError: Cannot read property 'fromTo' of undefined

monty test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm getting an error when trying to use TweenMax in React component. 

 

Quote

thumbnail.js:61 Uncaught (in promise) TypeError: Cannot read property 'fromTo' of undefined

 

I create the component like this below.

 

 

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Thumbnail from './thumbnail';
import TransitionGroup from 'react-transition-group/TransitionGroup'
import {fetchHomeCollection} from '../../actions/client';
import styles from '../../../styles/client/home.scss';
class Home extends Component {
    constructor(props){
        super(props);
    }
    componentWillMount(){
        this.props.fetchHomeCollection();
    }
    firstChild(props) {
      const childrenArray = React.Children.toArray(props.children);
      return childrenArray[0] || null;
    }
    renderThumbnails(){
        const {collection} = this.props;
        if(collection.length <= 0) return <div>Loading...</div>
        return collection.map((photo, index)=>{
            return(
                <TransitionGroup component={this.firstChild} key={photo._id}>
                    <Thumbnail {...photo} delay={0.5 * index} key={photo._id}/>
                 </TransitionGroup>
            )
        })
    }
    render(){
        return (
            <div id="home" className="flexbox-container">
                    {this.renderThumbnails()}
            </div>
        )
    }
}
function mapStateToProps({photos}){
    return{
        collection: photos.collection
    }
}
export default connect(mapStateToProps, {fetchHomeCollection})(Home);

 

 

then in my  Thumbnail component I use the componentWillAppear to call my TweenMax fromTo method.

 

import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import {TweenMax} from "gsap";

export default class Thumbnail extends Component{
  componentWillAppear(callback){
    const el = this.container;
    TweenMax.fromTo(el, 0.3, {opacity: 0}, {opacity: 1, onComplete: callback});
  }
}

 

Anyone know why I might be getting this error ? 

 

 

Link to comment
Share on other sites

Hm, I don't see an obvious problem. You're using the latest version, right? And have you tried either of these import statements?:

import {TweenMax} from "gsap/TweenMax.js";
// - OR - 
import TweenMax from "gsap";

 

Might be an issue with your config(?) I know that plenty of people are using GSAP in React, so I'm not quite sure what the issue is in your case. 

  • Like 1
Link to comment
Share on other sites

Thanks for the reply. Yea I see lots of folks making it work and I'm using the same setup. The only thing I can think might be causing it is webpack, but I don't have any issues with other modules import. Not sure if TweenMax is a global or its a module. I tried both your imports with the same problem. 

When I use the first import below and do a console.log("TweenMax = ", TweenMax) shows up but is missing a bunch of methods. When I import using the second statement then TweenMax is undefined. 


 

import TweenMax from "gsap"; 
import {TweenMax} from "gsap";
  1. __proto__:
    1. constructor:ƒ Object()
    2. hasOwnProperty:ƒ hasOwnProperty()
    3. isPrototypeOf:ƒ isPrototypeOf()
    4. propertyIsEnumerable:ƒ propertyIsEnumerable()
    5. toLocaleString:ƒ toLocaleString()
    6. toString:ƒ toString()
    7. valueOf:ƒ valueOf()
    8. __defineGetter__:ƒ __defineGetter__()
    9. __defineSetter__:ƒ __defineSetter__()
    10. __lookupGetter__:ƒ __lookupGetter__()
    11. __lookupSetter__:ƒ __lookupSetter__()
    12. get __proto__:ƒ __proto__()
    13. set __proto__:ƒ __proto__()

The above are the only methods I'm seeing no "fromTo" or all other methods that should be there.

 

Link to comment
Share on other sites

For anyone that might know more about webpack and greensock together, here is my current setup while having the issue above. 


 

const path = require('path')
const webpack = require('webpack')
const ROOT_DIR = path.resolve(__dirname, '../app')
module.exports = {
  devtool: 'eval',
  entry: [
    `${ROOT_DIR}/js/index`,
    'webpack-hot-middleware/client'
  ],
  output: {
    path: path.resolve(__dirname, '../public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      "config.ASSET_URL": JSON.stringify(process.env.ASSETS_URL)
    })
  ],
  module: {
    loaders: [
      { test: /\.js?$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '../app'),
        exclude: /node_modules/
      },
      { test: /\.scss?$/,
        include: path.join(__dirname, '../app', 'styles'),
        use: [
           'style-loader',
           'css-loader',
           {
             loader: 'sass-loader',
             options: {
               data: "$assetPath: '" + process.env.ASSETS_URL + "';"
             }
           }
         ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include : path.join(__dirname, '../app', 'images'),
        loader  : 'file-loader?limit=30000&name=[name].[ext]'
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        include : path.join(__dirname, '../app', 'fonts'),
        loader: 'file-loader?name=fonts/[name].[ext]'
      }
    ]
  }
}

 

Link to comment
Share on other sites

18 hours ago, monty said:

When I use the first import below and do a console.log("TweenMax = ", TweenMax) shows up but is missing a bunch of methods. 

 

You're looking at an empty object.

console.log({});

 

The import syntax is basically just destructing assignment. If you don't see something, then it's not being imported, so I don't know what to tell you other than it's not a gsap issue. 

 

Download this demo, and see how the webpack config is set up. Maybe that will give you a clue as to what the issue is.

https://www.webpackbin.com/bins/-Kr8msecz5AEs3ARjeOQ

 

  • Like 1
Link to comment
Share on other sites

Thanks @OSUblake  for the download demo.  As you can see from my code I posted above my webpack settings are similar in what they do. I spent all day yesterday adding and removing from my config only to realize i'm doing the same as this download link is. The only difference I can see is I'm running weback through node using https://github.com/webpack/webpack-dev-middleware and https://github.com/glenjamin/webpack-hot-middleware 

I have yet to rip all this out and see if this is causing the issue. 

 

I'm aware its not a gsap issue and in fact said in my post it most lightly is a webpack issue. I was hoping by posting on here that someone might have ran into a similar issue. I appreciate the help and might do a post on stackoverflow with tags for webpack to see if I can get some webapck folks to chime in. 

 

Unfortunately for now I need to move forward with the project as I'm 2 days down trying to get this to work. I love greensock packages and will look into this when I have more time and see why my build setup might be causing this to happen.   

Link to comment
Share on other sites

So sorry to hear about the trouble, @monty. 2 days? Yikes. That's frustrating. I feel terrible that you want to use GSAP but can't seem to get your project configured accordingly. Ugh. Please do let us know if/when you figure something out. Again, I really wish I had a great answer for you other than "I know for sure GSAP works with webpack/React." (which I realize is totally unhelpful to you right now). 

 

Hope to hear back from you soon.

Link to comment
Share on other sites

Thanks @GreenSockYep my head was spinning especially when it comes to webpack. I hopefully will have more time when the project is finished to go through webpack more and break down each part. No worries I know the folks who chimed in here were trying to help which is nice to see a good community. 

I can import the entire packages globally which is not ideal but I'll write back if I can find a fix. 

 

import 'gsap';

 

 

Link to comment
Share on other sites

I found out what the issue was. It wasn't webpack or webpack-dev-middleware thank goodness as I was not looking forward to that maze. 

Turns out a version of gsap was been added directly to the index page from a CDN. I was not aware of this until I had to add an attribute to the index head and boom there I saw TweenMax been added. 

 

This was a bad surprise that turned into a happy  moment as I figured out why the import was not working. 

Thanks again for the help here. 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...