Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NPM issue #324

Closed
omago opened this issue May 22, 2015 · 15 comments
Closed

NPM issue #324

omago opened this issue May 22, 2015 · 15 comments
Labels

Comments

@omago
Copy link

omago commented May 22, 2015

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
Copy link
Author

omago commented May 22, 2015

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
Copy link
Author

omago commented May 22, 2015

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
Copy link
Author

omago commented May 22, 2015

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
Copy link
Owner

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: #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
Copy link
Author

omago commented May 24, 2015

OK, thanks.

@hew
Copy link

hew commented Oct 14, 2015

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

@steffenmllr
Copy link

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
Copy link

krnlde commented Dec 17, 2015

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

@ghost
Copy link

ghost commented Feb 16, 2016

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

@gregorskii
Copy link

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
Copy link

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
Copy link

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
Copy link

ghost commented Apr 28, 2018

@denisinla Thanks! That worked for me.

@indietechsolutions-frontend

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

@FreddyFY
Copy link

This PR would be the solution #684

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

10 participants