How to accommodate GSAP's namespace hacking with ESLint?

Question

Background: GSAP has an..."irregular" import declaration. Example

import TimelineMax from 'gsap';
import GSAP from 'gsap-react-plugin';

Surprisingly, you never use either of those two objects anywhere, despite needing to import them. What happens is that a bunch of objects are loaded into the global namespace, so that this is suddenly possible:

_animateIn() {
    const toggleWrapper = ReactDOM.findDOMNode(this.refs.toggleWrapper);
    TweenLite.set(toggleWrapper, { display: 'block' });
    TweenLite.to(toggleWrapper, 0.3, { opacity: 1 });
  }

I've mostly come to terms with this, but I'm having trouble phrasing it in my ESLint configuration.

I have all of the globals so that anything used does not throw:

"globals": [
      "TimelineLite",
      "TimelineMax",
      "TweenLite",
      "TweenMax",
      "Back",
      "Bounce",
      "Circ",
      "Cubic",
      "Ease",
      "EaseLookup",
      "Elastic",
      "Expo",
      "Linear",
      "Power0",
      "Power1",
      "Power2",
      "Power3",
      "Power3",
      "Power4",
      "Quad",
      "Quart",
      "Quint",
      "RoughEase",
      "Sine",
      "SlowMo",
      "SteppedEase",
      "Strong",
      "Draggable",
      "SplitText",
      "VelocityTracker",
      "CSSPlugin",
      "ThrowPropsPlugin",
      "BezierPlugin"
    ],

I have "no-unused-vars": [2, {"vars": "local"}] so that globals are not checked also.

However, neither of these solve the issue of the above imports not being used anywhere in the files that use their "global children," and ESLint still throws.

As a stopgap, I've tried window.TimelineMax = TimelineMax; in a utils file we've been using for this purpose, but this strikes me as disorganized.

Is there a better way to deal with GSAP?

Answer 1

As @Bergi says, one way of dealing with side effect-dependent libraries is to just import 'package';, and let whatever needs to happen to the namespace happen.