cjs.MovieClip is not a Constructor when moving to React

[MarkGardnerATX]

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/)

[MarkGardnerATX]

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.

[kglad]

what line of code is triggering the error? 

[MarkGardnerATX]

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]

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

[MarkGardnerATX]

Yeah that's what I keep telling myself. Do you know if there's any good resources on using Animate with React so I can keep researching?

[kglad]

no.

i would google it.

[ClayUUID]

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

[MarkGardnerATX]

Yup that nailed it. Thank you!

[olfia_7962]

Hi, I've stumbled upon the same problem. May I know how it's done in iframe? I need the code example. Thanks