Jump to content
Search Community

Setting up draggable.js in webpack

JoePro test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Good evening all,

I have been trying to learn Webpack and have managed to include TweenMax which works has expected, however I am having no-joy in trying to implement draggable.js and I get this error each time I try and run my build.

5a6cf3d718bc7_ScreenShot2018-01-27at21_45_30.thumb.png.f386690dbe1b92a0e238f274ca5bf429.png

 

below is a copy of my webpack.config.js file

 

/*
* webpack.config.js
*/


const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');


const svgoOptions = {

    plugins: [
        { removeComments: true },
        { removeDesc: true },
        { removeTitle: true },
        { removeUnknownsAndDefaults: false },
        { convertShapeToPath: false },
        { cleanupIDs: false },
    ],
};

const config = {

    entry: {

        bundle:'./src/index.js',
        vendor: [
            'TweenLite',
            'CSSPlugin',
            'Draggable',


        ],

    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].[chunkhash].js',

    },
    resolve: {
        extensions: ['.js'],
        alias: {

            Test: __dirname + 'src/js/libraries/test.js',
            TweenLite: __dirname + '/src/js/libraries/TweenMax.js',
            CSSPlugin: __dirname + '/src/js/libraries/CSSPlugin.js',
            Draggable: __dirname + '/src/js/libraries/Draggable.js',

        },
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/,
            },
            {

                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                }),
            },
            {
                test: /\.(jpg|png)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            publicPath: '',
                        },
                    },
                ],
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'raw-loader',
                    },
                    {
                        loader: 'img-loader',
                        options: {
                            svgo: svgoOptions,
                        },
                    },

                ],

            },
        ],
    },
    devtool: 'source-map',
    plugins: [
        new WriteFilePlugin(),
        new ExtractTextPlugin('styles.css'),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],

        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
        }),
        new CopyWebpackPlugin([

            {from: 'src/images', to: 'images'},
            {from: 'src/audio', to: 'audio'},

        ]),

    ],

};

module.exports = config;

 

Any Advice, tips or suggestions mostly appreciated :)

 

 

Link to comment
Share on other sites

I don't have much experience with webpack, but from a cursory glance it looks like you probably used the files from inside the "uncompressed" folder, right? It seems like it's looking for TweenLite one directory up, but can't find it. If you just npm install gsap, all the files are flat, thus you won't run into that issue. The "uncompressed" folder has some subfolders. 

 

Did you try using the NPM version of GSAP? 

Link to comment
Share on other sites

@GreenSock Hi Jack, tnxs for asking, yes I did initially try it but thought I could avoid in doing so, only because I was already familiar with this particular project structure. Anyways I have installed it and it seems to be working, I have a separate issue now I am now getting an Uncaught TypeError:

5a6df343157a5_ScreenShot2018-01-28at15_58_42.png.817741b17faf043a6ed3a4b70b443acb.png

 

Just to give you a quick overview here is my code

 

/*
*timeline.js
*/


import TimelineMax from 'gsap'; //so we need to call gsap here

module.exports = function VerifiTimelines(verifier) {

    this.open = new TimelineMax({ paused: true });


};

 

This function gets called here in this file:

 

/*
* tweens.js
*/


import 'gsap'; // so I need to call in gsap again - this does not work

module.exports = function VerifiTweens(verifier) {

    this.start = function () {

        let tl = verifier.ui.interface.timeline.open; // this is the function created which ic just a timeline object


        tl.to(verifier.dom.container.find('ellipse#Oval'), 1, { fill: '#FFFFFF', x: 30}) // error is occuring here
        ;

        return tl;

    };

};

 

And just for reference this is my webpack.config file

 


/*
* webpack.config.js
*/


const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');


const svgoOptions = {

    plugins: [
        { removeComments: true },
        { removeDesc: true },
        { removeTitle: true },
        { removeUnknownsAndDefaults: false },
        { convertShapeToPath: false },
        { cleanupIDs: false },
    ],
};

const config = {

    entry: {

        bundle:'./src/index.js',
        vendor: './src/js/libraries/test.js',

    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].[chunkhash].js',

    },
    resolve: {
        extensions: ['.js'],
        alias: {

            Test: __dirname + 'src/js/libraries/test.js',

        },
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/,
            },
            {

                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                }),
            },
            {
                test: /\.(jpg|png)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            publicPath: '',
                        },
                    },
                ],
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'raw-loader',
                    },
                    {
                        loader: 'img-loader',
                        options: {
                            svgo: svgoOptions,
                        },
                    },

                ],

            },
        ],
    },
    devtool: 'source-map',
    plugins: [
        new WriteFilePlugin(),
        new ExtractTextPlugin('styles.css'),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],

        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
        }),
        new CopyWebpackPlugin([

            {from: 'src/images', to: 'images'},
            {from: 'src/audio', to: 'audio'},

        ]),

    ],

};

module.exports = config;

 

If anyone can point out my error would be most appreciated :)

Link to comment
Share on other sites

Hm, it sounds like what you're referencing there isn't actually a TimelineMax instance. Have you tried inspecting it directly? In other words, this doesn't smell like a webpack/importing issue - it just sounds like a JS error with what you're referencing maybe. (?). I'd console.log(verifier.ui.interface.timeline.open) and see what you get. 

Link to comment
Share on other sites

@GreenSock so I added some console logs at various points:

 

/*
* timelines.js
*/

import TimelineMax from 'gsap';

module.exports = function VerifiTimelines(verifier) {

    this.open = new TimelineMax({ paused: true });

    console.log(this.open); //first instance


};

 

import 'gsap';

/*
* tweens.js
*/

module.exports = function VerifiTweens(verifier) {

    this.start = function () {

        let tl = verifier.ui.interface.timeline.open;

        console.log(verifier.ui.interface.timeline.open); //second instance


        tl.to(verifier.dom.container.find('ellipse#Oval'), 1, { fill: '#FFFFFF', x: 30})
        ;

        return tl;

    };

};

 

I then get the following console msg

 

5a705f51e5e55_ScreenShot2018-01-30at12_04_03.thumb.png.ed91575dc53577c6fa529d522c2c0dbc.png

 

I hope this helps.

 

JoePro

Link to comment
Share on other sites

Ah, I think the problem is your import statement:

//BAD: 
import TimelineMax from "gsap";

//GOOD: 
import {TimelineMax} from "gsap";

//ALSO GOOD: 
import TimelineMax from "gsap/TimelineMax";

 

Remember, "gsap" just points to TweenMax which is probably why your import was referencing that instead of TimelineMax. 

  • Like 2
Link to comment
Share on other sites

@GreenSock Just has an update to anyone following. I think the lesson learned was that the NPM version of GSAP will allow more scope for dev and utility features for myself and future projects. The use of draggable was fairly straightforward after that:

 

1. Simply put the Draggable.js file into the 'gsap' folder within the 'node_modules' directory

 

5a75b56b4115a_ScreenShot2018-02-03at13_09_59.png.0bce292a14b29fa5e7174ec0a7f6c199.png

 

2. Then call using this method:

 

//WORKED FOR ME: 

import Draggable from "gsap/Draggable";

 

3. Then happy days!!!  8-)

 

Thanks again Jack ;)

 

JoePro

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...