ScrollToPlugin fails in webpack production build

[Robert Wildling]

God evening, all!

 

I have a webpack 4 setup, where the ScrollPlugin loads in development mode, but not in production mode.

 

The reason is that the plugin is not loaded in production mode, but is IS loaded in development mode.

My setup looks like this

 

```js
import {  TweenMax } from 'gsap'
import ScrollToPlugin from '../../node_modules/gsap/src/minified/plugins/ScrollToPlugin.min.js';
import 'animation.gsap'
import 'debug.addIndicators'
```

 

(This solution is also from somewhere in the forums here.)

Unfortunately, webpack's tree shaking remove the ScrollToPlugin, probably also, because it is never defined anywhere, which makes webpack (and also VSCode) think that it is never used – that at least is my assumption! Please feel free to correct me on that!

 

However, if I use `require([path/to/scrolltoplugin])` things work fine in production mode, too. *Magic*

This seems inconcise... irregular... wrong... incomplete... I am surely doing something wrong, misunderstanding a concept here... Could you set my head straight, please?

 

Do you guys have a different solution to that problem?

 

Or: @GreenSock Do you think this needs an implementation change on the ScrollToPlugin side?

[Rodrigo]

Hi Robert,

 

Check the docs for NPM usage:

 

https://greensock.com/docs/NPMUsage

 

Scroll a bit until you find the part of tree shaking.

 

It should be a bit like this:

 

import { TweenLite, ScrollToPlugin } from "gsap/all";

const scrollPlugin = ScrollToPlugin;

 

Try that and let us know how it goes.

 

Happy tweening!!

[Robert Wildling]

@Rodrigo Awesome!!! That was it!!! Works perfectly fine! Thanks a million times!

 

It is amazing each and every time, how well thought out and stable GSAP is! A never-ending jaw-dropper!