webpack issue

[ludomout]

Hi, Thank's for this magic module.

I am encountering a problem when I extend Smooth on a webpack project. If I use it directly, it works. If I extend the class, I have the following error in the console : Class constructor Smooth cannot be invoked without 'new'

Here is my code

import Parallax from './plugins/parallax';
const main = document.querySelector('#main');
 const parallax = new Parallax({
    native: true,
    section: section,
    ease: 0.1
  })

and the begining of the parallax class

import Smooth from 'smooth-scrolling';
import {
  TweenMax,
  TimelineMax
} from 'gsap';

class Parallax extends Smooth {

  constructor(opt) {
    ...
  }
}
export default Parallax;

For informations, I use version 2.3.7 with webpack on a vuejs/laravel project with https://github.com/vuejs/laravel-elixir-vue-2

Thank's

[baptistebriel]

Hello @ludomout,

That's pretty weird, because you did used new when creating an instance of Parallax. Seems like a babel issue, I think.

Maybe related to this, try to use the babel babel-plugin-transform-es2015-classes plugin?

You could as well try to copy/paste the classes from the demos folder and see if you have the same error. Let me know if you found a way to fix this!

[maxschulmeister]

@ludomout did you manage to fix this? transform-es2015-classes doesn't help, but looks like its a babel issue, nothing wrong with the module – using it on another project.

---

update: first of all custom.js from parallax demo doesn't work for me, custom.js from parallax-page demo does work – no clue why.

then in custom.js import Smooth from 'smooth-scrolling' throws the cannot invoke error

import Smooth from './smooth.js' where smooth.js is index.js of this repo, works like a charm.

i'm sorry i cannot help more than this, but at least it's a workaround solution for anybody else who gets the error – just use the module in a file instead of npm.

[ludomout]

@max-schu same problem with transform-es2015-classes. Unfortunately and for lack of time on the project, I had to abandon the idea of ​​smooth scroll for the moment.

[maxschulmeister]

hi baptiste,

i'm just posting again, because i ran into weird behaviours with a new project again. It seems something is wrong with the npm module, but unfortunately i cannot trace what it is yet. some time ago, i posted about the errors uglify is throwing, now i experienced weird errors in IE 10 & 11 after build, while including all neccessary polyfills with babel. Funny thing is, importing smooth-scrolling from a .js file instead of npm fixed it.

[manudurgoni]

Same problem for me with Webpack.

I think the problem comes from Babelify. It seems to have a conflict between Babelify and Webpack with the compilation of es6 to es5.

I'm using ify-loader to fix this issue with Webpack.

module: {
    rules: [
       {
            test: resolve('node_modules/smooth-scrolling'),
            loader: 'ify-loader'
       }
    ]
}