Minify breaking js changing the order of variables

When I ‘minify’ it’s also changing the order of the variables and causing the js error:

Uncaught TypeError: can’t access property “playOnInit”, e is undefined

Sample code hero.js:

(function() {
    var options = Object.assign({}, defaultOptions2, Autoplay.globalOptions, userOptions);
    var playOnInit = options.playOnInit, stopOnInteraction = options.stopOnInteraction, stopOnMouseEnter = options.stopOnMouseEnter, stopOnLastSnap = options.stopOnLastSnap, delay = options.delay;
    var interaction = stopOnInteraction ? destroy : stop;
    var carousel2;
    var timer = 0;
})();

When minified becomes it’s changing the order of the ‘e’ variable for some reason:

(()=>{(function(){var n=e.playOnInit,t=e.stopOnInteraction,s=e.stopOnMouseEnter,o=e.stopOnLastSnap,i=e.delay,r,e=Object.assign({},defaultOptions2,Autoplay.globalOptions,userOptions),a=t?destroy:stop,c=0})()})()

HTML

{{ $opts := dict "targetPath" "js/hero.js" }}
{{ $script := resources.Get "js/hero.js"| js.Build $opts | minify | resources.Fingerprint }}
<script defer type="text/javascript" src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity }}"></script>

Build with command
hugo --cleanDestinationDir --gc --minify

I’ve checked it’s not getting minifed twice. When I remove the | minify it works fine but without minification.

(() => {
  // <stdin>
  (function() {
    var options = Object.assign({}, defaultOptions2, Autoplay.globalOptions, userOptions);
    var playOnInit = options.playOnInit, stopOnInteraction = options.stopOnInteraction, stopOnMouseEnter = options.stopOnMouseEnter, stopOnLastSnap = options.stopOnLastSnap, delay = options.delay;
    var interaction = stopOnInteraction ? destroy : stop;
    var carousel2;
    var timer = 0;
  })();
})();

I’m actually using embla-carousel with autoplay plugin but I’ve simiplied this for demoing the issue here.

I would recommend that you set minify true as an option here instead of using the minify function. I suspect you will get better compression, but more importantly more correct end result.

I usually do something like this:

{{ $opts := dict "targetPath" "js/hero.js" "minify" hugo.IsProduction }}
2 Likes

Upstream issue:
https://github.com/tdewolff/minify/issues/472

2 Likes

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.