Skip to main content
Participant
December 19, 2022
Question

cjs.MovieClip is not a Constructor when moving to React

  • December 19, 2022
  • 3 replies
  • 1359 views

Hey everyone, 

New to Animate and new to React and stuck on this problem. I've asked my TAs in class and scoured the internet for a solution and can't find it. 

I have an animation from Animate that works in a page that is Bootstrap and vanilla JS. I've not migrated the entire page over the React with Bootstrap and I can not get the animation to work. I've played whack-a-mole on errors left and right and started over at least a dozen times, but in the end I keep getting stuck on this error... "cjs.MovieClip is not a constructor."

I've got a local version of createjs linked in my index.html as has been suggested elsewhere but that doesn't help. I'm sure there's something simple I'm missing but I've exhausted everything else I know to try. Does anyone have any suggestions? Is there a better way to get animations from Animate working in React? 

(Here's the page with the working coffee cup animation at the top if that helps https://markgatx.github.io/Portfolio-v2/)

    This topic has been closed for replies.

    3 replies

    Legend
    December 21, 2022

    Put it in an iframe. Whenever trying to mix Animate's HTML output with anything, the answer is always an iframe.

    Participant
    January 20, 2023

    Yup that nailed it. Thank you!

    kglad
    Community Expert
    Community Expert
    December 19, 2022

    what line of code is triggering the error? 

    Participant
    December 19, 2022

    It's in the external js file at the end of this segment...

    var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
    
    (function (cjs, an) {
    
    	var p; // shortcut to reference prototypes
    	var lib={};var ss={};var img={};
    	lib.ssMetadata = [
    			{name:"coffee_cup_400_atlas_1", frames: [[0,0,398,581],[0,583,367,241],[0,826,378,62],[0,890,420,18],[0,910,409,18]]}
    	];
    	
    	
    	(lib.AnMovieClip = function(){
    		this.actionFrames = [];
    		this.ignorePause = false;
    		this.gotoAndPlay = function(positionOrLabel){
    			cjs.MovieClip.prototype.gotoAndPlay.call(this,positionOrLabel);
    		}
    		this.play = function(){
    			cjs.MovieClip.prototype.play.call(this);
    		}
    		this.gotoAndStop = function(positionOrLabel){
    			cjs.MovieClip.prototype.gotoAndStop.call(this,positionOrLabel);
    		}
    		this.stop = function(){
    			cjs.MovieClip.prototype.stop.call(this);
    		}
    	}).prototype = p = new cjs.MovieClip();
    kglad
    Community Expert
    Community Expert
    December 19, 2022

    oh, there's some problem in your set-up then.  there's no error in the createjs.js file.

    Participant
    December 19, 2022

    I meant to say I've NOW migrated the page to React. I still can't get the animation to work. Typos can be confusing.