NPM issue

[omago]

Hi Jan,

My question is not directly related to ScrollMagic. My code has grown and i decided to use npm, gulp, webpack for frontend.

On top of my file i have:

var $ = require("jquery");
var ScrollMagic = require("scrollmagic");
var gsap = require("gsap");

I am getting following errors in my console:

11:02:35:546 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.jsScrollMagic._util.U.log @ script.min.js:13048
script.min.js:13048 
11:02:35:550 (ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin 'debug.addIndicators'. Please make sure to include plugins/debug.addIndicators.js

How can i require a plugin?

[omago]

I can do

require("../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js");

But then grunt gives me the error:

ERROR in ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/domagoj/Projects/Sedmi_odjel/7o-web/7o-web/layout/static/node_modules/scrollmagic/scrollmagic/ScrollMagic.js in /Users/domagoj/Projects/Sedmi_odjel/7o-web/7o-web/layout/static/node_modules/scrollmagic/scrollmagic/uncompressed/plugins
 @ ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61

[omago]

I managed to resolve require with webpack aliases

var webpack = require("webpack");
var path = require('path');

module.exports = {
    output: {
        filename: "scripts.min.js"
    },
    resolve: {
        root: [path.join(__dirname, "node_modules")],
        extensions: ['', '.js', '.coffee', '.html'],
        modulesDirectories: ['node_modules'],
        alias: {
            "npm": 'node_modules',
            "TweenLite": __dirname + '/node_modules/gsap/src/uncompressed/TweenLite.js',
            "TweenMax": __dirname + '/node_modules/gsap/src/uncompressed/TweenMax.js',
            "TimelineLite": __dirname + '/node_modules/gsap/src/uncompressed/TimelineLite.js',
            "TimelineMax": __dirname + '/node_modules/gsap/src/uncompressed/TimelineMax.js',
            "scrollmagic": __dirname + '/node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js',
            "animation.gsap": __dirname + '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js',
            "debug.addIndicators": __dirname + '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'
        }
    },
    module: {
        loaders: [
            { test: /\.coffee$/, loader: 'coffee' }
        ]
    },
    plugins: [
        //new webpack.ResolverPlugin(
        //    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        //),
        //new webpack.optimize.DedupePlugin(),
        //new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            jquery: "jquery"
        })
    ]
};

But i am still getting this error:

ERROR in ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/domagoj/Projects/Sedmi_odjel/7o-web/7o-web/layout/static/node_modules/scrollmagic/scrollmagic/ScrollMagic.js in /Users/domagoj/Projects/Sedmi_odjel/7o-web/7o-web/layout/static/node_modules/scrollmagic/scrollmagic/uncompressed/plugins
@ ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61

[omago]

I managed to do it with script-loader.

Once installed i can call my scripts with:

require("script!ScrollToPlugin");
require("script!scrollmagic");
require("script!animation.gsap");
require("script!debug.addIndicators");

This executes the file in a global context.

[janpaepke]

Hey there. You should be able to do it like this:

var $ = require("jquery");
var ScrollMagic = require("scrollmagic");
require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap');
var gsap = require("gsap");

I can see that this isn't very intuitive and this was discussed here: https://github.com/janpaepke/ScrollMagic/pull/254 But the problem is that the pre-publish npm script never worked correctly and so this was disabled (for now).

In future versions you might be able to include the plugin like this:

require('scrollmagic/plugins/animation.gsap');

[omago]

OK, thanks.

[hew]

So, what is the preferred method to use ScrollMagic with Browserify? Directly linking to the plugins doesn't seem to work (anymore).

[steffenmllr]

This worked for me on Webpack:

resolve: {
    alias: {
        "TweenLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
        "TweenMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
        "TimelineLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
        "TimelineMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
        "ScrollMagic": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
        "animation.gsap": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
        "debug.addIndicators": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
    }
},

Somewhere in your code:

const ScrollMagic = require('ScrollMagic');
require('animation.gsap');
require('debug.addIndicators');
const TimelineMax = require('TimelineMax');

I needed the exact same spelling ScrollMagic - scrollmagic didn't work for me when I wanted to require the indicators or gasp

[krnlde]

Also you probably should load gsap before scrollmagic, since scrollmagic depends on it.

[ghost]

Thanks @steffenmllr, can confirm this works for me in Webpack

[gregorskii]

The solution above in the post from @steffenmllr works great, when I had this broken I was half there, I did not fully qualify the path for TweenLite/Max TimelineLite/Max but did qualify the ScrollMagic packages. Make sure one sets up an alias for all of them and imports them using the exactly named alias.

[thomasbruketta]

in @steffenmllr you may run into issues unless you path.resolve, I had issues with the current version of webpack using the capitalized Path.resolve. see https://webpack.js.org/configuration/resolve/

[denisinla]

For Webpack4 the below got it all working for me.

The below uses resolve.modules

///webpack.config.js
resolve: {
    modules: ['node_modules'],
    alias: {
      'TweenLite': 'gsap/src/minified/TweenLite.min.js',
      'TweenMax': 'gsap/src/minified/TweenMax.min.js',
      'TimelineLite': 'gsap/src/minified/TimelineLite.min.js',
      'TimelineMax': 'gsap/src/minified/TimelineMax.min.js',
      'ScrollMagic': 'scrollmagic/scrollmagic/minified/ScrollMagic.min.js',
      'animation.gsap': 'scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js',
      'debug.addIndicators': 'scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js'
    }
  }

Import TweenMax prior to ScrollMagic

// app.js
import TweenMax from 'TweenMax';
import ScrollMagic from 'ScrollMagic';
import 'animation.gsap';
import 'debug.addIndicators';

[ghost]

@denisinla Thanks! That worked for me.

[indietechsolutions-frontend]

@denisinla you saved my day, dude.... That worked for me.

[FreddyFY]

This PR would be the solution #684