Transpiling issue with ES5 compatibility

[brianmcca1]

Hello all,

Our app uses acorn to validate the transpiled code for ES5 compatibility. We're running into an issue when pulling in HTMLHint because it does not seem to be transpiled when it is pulled in - we get the following error:

Running "acorn" task
Validating that all JS files in `dist` are ES5 compatible...
Checking dist/app.js for es5 compatibility...
Warning: The keyword 'class' is reserved (121781:2348) Use --force to continue.

The failing code in the built app.js file is:

var r = class {
      constructor() {
        this._listeners = {}, this._mapCdataTags = this.makeMap("script,style"), this._arrBlocks = [], this.lastEvent = null;
      }

      makeMap(e) {
        for (var t = {}, a = e.split(","), n = 0; n < a.length; n++) t[a[n]] = !0;

        return t;
      }

Which I believe comes from this file in HTMLHint.

We've tried adding the HTMLHint directory in node_modules to our Babel config to force the package to be transpiled with the rest of our app but that doesn't resolve the issue, it still fails for the same reason.

We are using the most recent version (0.11.0) of HTMLHint from node. We have not had any similar issues with any other library used in our app. Is this a known issue? Any help would be greatly appreciated.

[brianmcca1]

Update: The issue has been solved on our end by changing some of our webpack config; we were specifying our root 'app.js' file with Babel polyfill; by changing it to point to the whole /src/js directory it seems to transpile the HTMLHint code correctly and resolves the issue.

  // App entry point. Can be an obj or an array. Array = 1 bundle, Obj = 1 bundle per property.
  // https://webpack.js.org/configuration/entry-context/#entry
  entry: {
    app: ['@babel/polyfill', 'whatwg-fetch', './src/js/'], // This last argument was './src/js/app.js' before
  },

I'll leave this issue open for now because I'm still not positive why we have to change our babel configuration for HTMLHint specifically, but we have a workaround in place.

EDIT: False alarm; this change caused the build to pass, but only because it was pulling in a blank index.js instead of the proper app.js file. We're still searching for a fix.

[brianmcca1]

Update: we found a successful workaround using some Babel plugins to resolve the pieces that aren't transpiling properly; specifically:

         "@babel/plugin-transform-classes",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-block-scoping"

[depoulo]

Is it Windows specific? Then you might be running into this: https://github.com/depoulo/are-you-es5/commit/43730b4150a60278ebc65257ff1070504545d4d1 See also https://github.com/obahareth/are-you-es5/pull/16#issuecomment-509390339

[brianmcca1]

@depoulo No, this issue was seen on MacOS

[depoulo]

Must be something with you though, since it now works flawlessly for me on all platforms.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.