Load a library globally to a project after using yarn add

[farissi]

Hello, What's the proper way to load a library (GSAP & scrollmagic in my case) after adding them using yarn add 'libraryName'. I managed to import Jquery by using provide in task-config.js, still, I'm not sure what's the proper way to import a different library including its plugins. An example would be greatly appreciated. Thanks

[wgro]

Here you are. If you're using one of the premium GSAP plugins, I believe you have to import it using script-loader.

import 'gsap/jquery.gsap';
import 'gsap/ScrollToPlugin';
import 'script-loader!./vendor/DrawSVGPlugin.js';
import ScrollMagic from 'scrollmagic';
import 'ScrollMagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic';
import 'ScrollMagic/scrollmagic/uncompressed/plugins/animation.gsap';```

[york-xtrem]

@farissi Did you get it to work? I've been going crazy for a week and nothing...

[gregkohn]

Yes, as @wgro said, if you are using Babel (configured by default within Blendid) then you can load the libraries in app.js using ES6 imports. Those paths can be relative to node_modules.

[york-xtrem]

@gregkohn The problem is in scrollmagic that in the animation.gsap plugin must be already loaded TimelineMax and TweenMax.

ERROR in ../scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/jorgebeltrannunez/Documents/Projects/2017/blendid-custom/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ../scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ /Users/jorgebeltrannunez/Documents/Projects/2017/blendid-custom/src/javascripts/app.js
 @ multi webpack-hot-middleware/client?reload=true&noInfo=false&quiet=true&react=false ./app.js

ERROR in ../scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TweenMax' in '/Users/jorgebeltrannunez/Documents/Projects/2017/blendid-custom/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ../scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ /Users/jorgebeltrannunez/Documents/Projects/2017/blendid-custom/src/javascripts/app.js
 @ multi webpack-hot-middleware/client?reload=true&noInfo=false&quiet=true&react=false ./app.js

I have in my app.js:

import {TweenMax, TimelineMax} from "gsap";
import ScrollMagic from "scrollmagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap";

[york-xtrem]

Fixed up!

Solution: Disable AMD

npm i imports-loader

import {TweenMax, TimelineMax} from "gsap";
import ScrollMagic from "scrollmagic";
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

More info: https://github.com/webpack-contrib/imports-loader, https://webpack.js.org/loaders/imports-loader/#webpack-config-js and https://github.com/janpaepke/ScrollMagic/issues/665#issuecomment-323344772

Disable AMD

There are many modules that check for a define function before using CommonJS. Since webpack is capable of both, they default to AMD in this case, which can be a problem if the implementation is quirky.

Then you can easily disable the AMD path by writing

imports-loader?define=>false

[dghez]

Actually it doesn't work for me. It did the trick to save me from getting an ESLint Error and your previous error but now I get (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js