TweenMax into Electron

[todotoit]

Hi there

 

I'm having issues getting gsap included properly into an Electron app.

I've a standard browser app (that uses script src, for instance) and now I want to put it within an Electron container without modify too much (I would like to keep it browser compatible with minimal efforts).

 

I've used some popular tip to get jQuery working on it like this one:

window.$ = window.jQuery = require('./path/to/jquery.js');

But I cannot have TweenMax working using similar tips, I'm getting the error "Uncaught Error: Cannot find module '../TweenLite.js'" while I'm trying to use TweenMax..

 

Any tips would be very appreciated.

 

Thanks

 

[Jonathan]

Hello todotoit and welcome to the GreenSock Forum

Please standby while we look into this. But have you tried to also post your question on Electron git Issues page?

https://github.com/electron/electron/issues

Maybe others in the forum have used Electron and can help answer your question.


 

[OSUblake]

Have you tried using a script tag? 

<script src="./node_modules/gsap/src/uncompressed/TweenMax.js"></script>

[WarenGonzaga]

I know about electron!
 

You can use script tag instead of that! Since electron is HTML5 + CSS +JS.

[todotoit]

Hi all and thanks for your reply.

 

After a bit of investigation I can say that TweenMax works fine in Electron.

 

The problem (and the following mentioned error) happens only when I try to load some plugins, for instance 'DrawSVGPlugin' and 'MorphSVGPlugin'.

"Uncaught Error: Cannot find module '../TweenLite.js'" 

Other plugins seem to work fine. Is it something related to premium only plugins?

[OSUblake]

There's nothing related to premium plugins, but we can't see your directory structure. Why don't you just use a script tag? GSAP is global.

[joephuz]

I had this same issue and was able to resolve it by commenting some code out. As 

todotoit mentioned above it seems to be related to using plugins, I was using Draggable. To resolve I made a copy of Draggable and commented out the very last function (export to AMD/RequireJS and CommonJS/Node) - starting at line 2291. you can see in that code there is some requires which i think Electron is confused about the file structure... removing this did the trick for me and was able to run the project finally:

 

//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)

// (function(name) {

// 	"use strict";

// 	var getGlobal = function() {

// 		return (_gsScope.GreenSockGlobals || _gsScope)[name];

// 	};

// 	if (typeof(define) === "function" && define.amd) { //AMD

// 		define(["TweenLite", "CSSPlugin"], getGlobal);

// 	} else if (typeof(module) !== "undefined" && module.exports) { //node

// 		require("../TweenLite.js");

// 		require("../plugins/CSSPlugin.js");

// 		module.exports = getGlobal();

// 	}

// }("Draggable"));

[David Knape]

This is still a problem if you use the minified GSAP distribution in electron. The solution is NOT to use script tags. 

 

The issue is that Electron is also node, and it fakes out the module loader detection code left in these 'minimized' files.

 

To reproduce this error, make an electron app that loads the following two scripts via script tags:

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js

 

Yes, you can modify the files to remove the broken loader code.

 

Another solution is to use the official node distribution.

$ npm install gsap

 

In my case, I am writing ES6 with babel and webpack, and the transpiled output is running fine in Electron.