.min not working, uglify breaks script about smooth-scrolling HOT 8 CLOSED

Hi @max-schu,

Indeed, it comes from uglifyjs -- the mangle options needed a reserved word 'Smooth' because I'm checking the constructor name to know if it's an extended version of the Smooth class or not.

https://github.com/mishoo/UglifyJS2#mangler-options

Seems like it's now fixed! If you look at the native-scrollbar demo, it's using the minified script.

Let me know if you have any other issues!

from smooth-scrolling.

Hi @baptistebriel,

First of all, thanks for this awesome package!
I am experiencing the same issue with webpack 4.14 + uglifyjs-webpack-plugin 1.2.7 + uglify-es 3.3.9.

When compressing my bundle in production mode, webpack or uglify-es (?), is renaming the Smooth class name. Setting a reserved word does not seems to fix the problem.

Here is a preview of my webpack.prod.js configuration file:

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './javascript/src/script.js',
  output: {
    filename: 'app.min.js',
    path: path.resolve(__dirname, 'javascript')
  },
  optimization: {
    minimizer: [
      new uglify({
        parallel: true,
        uglifyOptions: {
          output: {
            comments: false
          },
          mangle: {
            reserved: ['Smooth']
          }
        }
      })
    ]
  }
};

I tried a lot of things in the configuration: compress options, mangle options, etc.. nothing works.
Can you take a look at this and give a short feedback?

Here is a test repository I have created for the demonstration: https://github.com/xavierfoucrier/webpack-uglify-es-mangle.

I have found a fix for your package that will (should) prevent this from hapenning in the future:
https://stackoverflow.com/questions/49598260/webpacks-removes-classnames-when-minifying-uglifying-es6-code-with-inheritance#answer-49610802

Best regards 😉

from smooth-scrolling.

Hello @xavierfoucrier — sorry for the late reply!

What version of uglifyjs-webpack-plugin are you using? Did you find any related issues on the official repository of uglify? Maybe make sure you're using the latest version of it.

As of using this.constructor === Parent instead of this.constructor.name === 'Parent', did you tried cloning smooth-scrolling and adding this fix? I'd definitely update the code if that fixes the issue. Feel free to open a pull request if you have some time to do it.

You can also try copying/pasting smooth-scrolling source code and importing it from your local repository instead of importing it from npm, so you can update that line and see if it works out.
You could do something like import Smooth from './lib/smooth' instead of import Smooth from 'smooth-scrolling'

Let me know!

from smooth-scrolling.

ok so for any other people using webpack and webpackUglify plugin with gulp.

including the uncompressed version and setting the webpackUglify plug in like so works.
Including the compressed scripts will still break it tho.

new webpack.webpack.optimize.UglifyJsPlugin({ minimize: true, sourceMap: false, mangle: false }),

from smooth-scrolling.

Hi @baptistebriel — thanks for your reply first!

I am using 1.2.7 as mentioned in my post and I found some related issues on the official repository of uglifyjs-webpack-plugin, also posted an issue too, but may be the problem doesn't come from that plugin.

Never mind I will continue to investigate and test some other stuff based on your proposals. If a pull request is needed, it would be a pleasure to code for this package!

See you in the next episode 😉

from smooth-scrolling.

Hi @baptistebriel!

I am confused, I don't understand why your code looks different from your github repository when importing your package from npm at the same version @2.3.9... the code should be the same right? 😕

I have tested to copy/paste the source to my local repo, but it doesn't work.

Using import Smooth from 'smooth-scrolling'; with webpack dev environment works well: the uncompressed app.js file is running on my dev server, and everything is fine with the smooth.

Using the production environment of webpack builds a compressed app.min.js file properly, but the smooth scrolling isn't working and there is no error in the console, meaning that the javascript is not run in the right way.

I continue my tests.

from smooth-scrolling.

After (a long) investigation, it seems that it is a webpack issue. The class is renamed even if the webpack default minifier, UglifyJS, is disabled.

Manually renaming the class from new smooth_scrolling_Smooth(...) to new Smooth(...) in the minified source file works well, indicating that the problem come from the class name. I will try to add a fix on your code and make a pull request. 👍

from smooth-scrolling.

Hi @baptistebriel,

This pull request will fix the issue.
Thanks for pushing it to production.

Best regards 😉

from smooth-scrolling.