efineday is not a function error when using w/ ember-cli-stencil in production builds

[tomwayson]

Getting Uncaught (in promise) TypeError: a.efineday is not a function errors when using this w/ ember-cli-stencil (specifically w/ calcite-components), but only in production builds. Example:

https://coronavirus-response-alaska-dhss.hub.arcgis.com/datasets/covid-cases-out-of-state/data?uiVersion=5f51dc80921ca7850742e54353752c7a591cbdd6

The issue appears to be that we've added an exception to the regex for customElements.define(), but in a production build this addon is operating on the uglified code, so this statement:

customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1
        /* isElementConstructor */
        ))

is now a.define(c, he(u, r, 1)))

Maybe we can instruct the ember build to run this before uglify? That might cause other errors. (see https://github.com/Esri/ember-esri-loader/issues/95#issuecomment-634728959)

[tomwayson]

A cheesy fix for this could be just to do: customElements.efineday = customElements.define before vendor.js is loaded.

[tomwayson]

Or maybe specifying some uglify options to preserve customElements in the output.

[trescube]

Dumb question: what does efineday do?

[tomwayson]

https://github.com/Esri/ember-esri-loader/#how-it-works

[tomwayson]

I tried disabling ember-cli-uglify but customElements was still getting mangled. I then remembered that ember-auto-import applies babel transforms, so I tried:

      skipBabel: [{
        // needed for ember-esri-loader
        package: '@esri/calcite-components',
        semverRange: '*'
      }],

But that had no effect either.

Then I thought, "oh, it's skipping babel but then getting uglified." So I tried both together. No dice.

At this point I'm not sure what's transforming that file (for reference, this is the file in question, line 2070). It feels like skipBabel didn't get applied.

[tomwayson]

FWIW - adding the following to the index.html files (app and test) before the vendor.js script tag seems to work.

    <script>
      // see: https://github.com/Esri/ember-esri-loader/issues/95#issuecomment-634392591
      customElements.efineday = customElements.define;
    </script>

😞

[tomwayson]

FYI - that does not work in IE, we get a 'customElements' is undefined error:

I could check for customElements before executing that line, but I think we'll end up running into the original error later when the someone uses a stencil component.

I think that would need to run after the custom elements polyfill is added.