Problems minifying with Codekit [solved v3.2.0]

[dlewand691]

May just be my error for using too many plugins, but when trying to minify and create a source map, I get the error of "Cannot set property 'ScrollReveal' of undefined" and page will not load.

When not minifying and just combining imports, it runs fine.

Site is here: http://www.paulrand.design/

Using Codekit on OSX to process all files.

[jlmakes]

Hey @dlewand691, not sure what’s going on.

#209 brought up a similar issue related to webpack compatibility, and required a configuration change to the build process—maybe there’s still room for improvement.

Excerpt from http://www.2ality.com/2014/05/this.html:

1.1 this in real functions

In real functions, the value of this depends on the mode one is in:

• Sloppy mode: this refers to the global object (window in browsers).

    function sloppyFunc() {
        console.log(this === window); // true
    }
    sloppyFunc();

• Strict mode: this has the value undefined.

    function strictFunc() {
        'use strict';
        console.log(this === undefined); // true
    }
    strictFunc();

It basically is saying that in strict mode, the value of this is undefined at the top-level. I wouldn’t be surprised if this is what is causing the problem.

Out of curiosity @dlewand691, have you narrowed down which build features cause the problem? (For example, is always when you minify or when you minify with source maps?) Plus, can you list some of the other JavaScript libraries you’re using? I’m curious to see how their distribution files differ.

[dlewand691]

Hi Julian-
Wow, great info. A little more about my set up:

• Tried compiling with a variety of options: JSHint with minify only, then minify + source map, JSLint with minify only, then +source map. All had the same result.
• Only option that worked was to do no minification
• Use quite a few plugins, eventhough I know I probably shouldn't. Here's a list
  • Foundation framework
  • Jquery
  • Animsition
  • Chocolat
  • Fastclick
  • Unveil
  • matchHeight
  • Owl Carousel
  • RRSSB
  • Scrollup
  • Select2
  • Selection-sharer
  • TRMix

You can also go to http://www.paulrand.design/js/min/app-min.js to see the full un-minified JS file in question. I'd definitely like to trim down but may not, will see.

Thanks for looking into this! Much appreciated. Let me know if you need anymore info.
Danny

[jlmakes]

@dlewand691 I’ve simplified the module scopes to try and wrap my mind around this…

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require, exports, module);
  } else {
    root.ScrollReveal = factory();
  }
}(this, function (require, exports, module) {

  ;(function() {

    this.ScrollReveal = (function () {})();

  }).call(this);

  return this.ScrollReveal;

}));

What’s odd for me is that in my all tests, this either references the window object (in browsers) or the global object (in node). Maybe it’s possible that CodeKit minifies in strict mode, and it is being inherited — which makes this undefined.

[dlewand691]

In Codekit there are many options that you can enable/disable for either JSHint or JSLint. The minifier it uses is Uglify.js. I'm using the defaults, but can certainly try combinations of them to see if one works.

Some info about is here: https://incident57.com/codekit/help.html#jslint

And a screenshot of a few of the options (there are many more):

[jlmakes]

Hey @dlewand691, any chance you can help me out? I’m refactoring some stuff for version 3.2, and I think I may have sorted out this Codekit issue 🤔

If I send you a sample build, can you drop it into your Codekit workflow to see if solves the problem?

[dlewand691]

Absolutely! Thrilled to help. Send me any files and I'll let you know how things work out.

[vaughn-taylor]

I'm using CodeKit 3.2, Build 25849 and I'm having a problem minifying as well. Un-minified, I have no JS errors. As soon as I minify, I get the following error:

Uncaught ReferenceError: c is not defined

I realize that without looking at my code, it's impossible to say what is going on here, but I was hoping that there has been some sort of resolution and/or tips on how to resolve this issue?

[jlmakes]

This issue Cannot set property 'ScrollReveal' of undefined was solved in 3.2.0 by removing the UMD gulp plugin, and manually preparing the UMD.

You’re getting a different error @vaughn-taylor. What version of ScrollReveal are you using, and what is the offending line number? Also, have you reproduced this issue with just ScrollReveal and Codekit alone (no other libraries/plugins)?