baptistebriel / smooth-scrolling

smooth scrolling and parallax effects on scroll
MIT License
612 stars 75 forks source link

Uncaught TypeError: Class constructor Smooth cannot be invoked without 'new' #93

Closed wezzou1 closed 6 years ago

wezzou1 commented 6 years ago

Hi, nice smooth-scroll, really love it, but when I try to extends Parallax with smooth-scroll I've got this message, I don't really know why... but I think it's something with my webpack? or something,,

The error

Uncaught TypeError: Class constructor Smooth cannot be invoked without 'new'

var Parallax = function (_Smooth) {
    _inherits(Parallax, _Smooth);

    function Parallax(opt) {
        _classCallCheck(this, Parallax);

                 <!----- This line --->
        var _this = _possibleConstructorReturn(this, (Parallax.__proto__ || Object.getPrototypeOf(Parallax)).call(this, opt));
                 <!--- end of line --->

        _this.createExtraBound();
        _this.resizing = false;
        _this.cache = null;
        _this.dom.divs = Array.prototype.slice.call(opt.divs, 0);
        return _this;
    }
...
}

My webpack.config

'use strict';

const path = require('path');
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const SvgStore = require('webpack-svgstore-plugin');
require("babel-polyfill");

module.exports = {
    cache: false,
    context: path.resolve(__dirname, "src"),
    entry: {
        app: [
        "babel-polyfill", "./js/app.js"
        ],
    },
    output: {
        filename: "[name].bundle.js",
    },
    resolve: {
        alias: {
            "TweenLite": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TweenLite.js'),
            "TweenMax": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TweenMax.js'),
            "TimelineLite": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
            "TimelineMax": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
            "ScrollMagic": path.resolve(__dirname, 'node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
            "animation.gsap": path.resolve(__dirname, 'node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js')
        }
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules\/(?!(dom7)\/).*/,
            use: [
            {
                loader: "babel-loader",
                options: { 
                    presets: ["es2015"] 
                }
            }
            ],
        },
        {
            test: /\.scss$/,
            use: [
            MiniCssExtractPlugin.loader,
            { 
                loader: 'css-loader', 
                options: { 
                    importLoaders: 1 
                }
            },
            {
                loader: 'sass-loader'
            }
            ],
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=1000&name=[name]-[hash].[ext]'
        }
        ],
    },
    externals: {
        'TweenMax': 'TweenMax'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].bundle.css"
        }),
        new SvgStore({
          // svgo options
          svgoOptions: {
            plugins: [
              { removeTitle: true }
            ]
          }
        })
    ],
};

How do i solve it?

wezzou1 commented 6 years ago

I Solved it by install ify-loader https://github.com/browserify/ify-loader