Babel v7 (rc) prevents the custom elements polyfill from finding element definitions.

[bicknellr]

#216 pins @babel/plugin-transform-classes to a particular version to avoid a problem with the way that they transformed classes extending built-in constructors. babel/babel#7533 fixes this problem. Once it's in a tagged release, we should revert #216.

[javatheist]

The mentioned babel bug #7533 has been merged into master already. Pls revert #216.

[bicknellr]

That PR was merged but isn't in any release yet, AFAICT.

[coreyfarrell]

babel just released 7.0.0-beta.48 today, should include the fix.

[web-padawan]

I am trying 7.0.0-beta.49 and still getting the errors like this:

Class constructor CustomStyle cannot be invoked without 'new'

Has someone been able to run latest @babel/preset-env with a babel-loader? Trying to get Webpack working now and got stuck on that issue.

[bicknellr]

babel/babel#7533 actually didn't end up fixing this issue. The function they use in place of Reflect.construct causes this.contructor to be wrong when calling into the polyfilled HTMLElement constructor. This prevents the polyfill from finding the definition, which it needs to either create an element with the correct tag name or return the already existing element that's being upgraded. I'm not sure of a good workaround or potential fix to send to Babel yet.

[bicknellr]

Hmm, maybe Function.bind.toString would help here? If we asked them to actually call Class from that snippet with apply if Class.toString() doesn't end with "{ [native code] }", would that still guarantee they always constructed native stuff with new?

[web-padawan]

Referenced this issue from the relevant lit-element issues.
/cc @TimvdLippe

[web-padawan]

@bicknellr I have tried to update @babel/plugin-transform-classes to 7.0.0-beta.52, containing the fix from babel/babel#8100 and I can confirm the problem still exists, e. g. here is the error in IE11:

Error: The custom element being constructed was not registered with `customElements`.
   {
      [functions]: ,
      __proto__: { },
      description: "The custom element being constructed was not registered with `customElements`.",
      message: "The custom element being constructed was not registered with `customElements`.",
      name: "Error",
      stack: "Error: The custom element being constructed was not registered with `customElements`.
   at b (https://polymer3-webpack-starter.herokuapp.com/vendor/bundles/webcomponents-sd-ce-pf.js:175:516)
   at l (https://polymer3-webpack-starter.herokuapp.com/vendor/babel-helpers.min.js:1:2481)
   at c (https://polymer3-webpack-starter.herokuapp.com/vendor/babel-helpers.min.js:1:2669)
   at t (https://polymer3-webpack-starter.herokuapp.com/main.35df2bc9.js:1:9926)
   at ge (https://polymer3-webpack-starter.herokuapp.com/vendor/bundles/webcomponents-sd-ce-pf.js:165:211)
   at ke (https://polymer3-webpack-starter.herokuapp.com/vendor/bundles/webcomponents-sd-ce-pf.js:171:370)
   at Anonymous function (https://polymer3-webpack-starter.herokuapp.com/vendor/bundles/webcomponents-sd-ce-pf.js:170:41)
   at oa (https://polymer3-webpack-starter.herokuapp.com/vendor/bundles/webcomponents-sd-ce-pf.js:167:886)
   at Anonymous function (https://polymer3-webpack-starter.herokuapp.com/vendor/bundles/webcomponents-sd-ce-pf.js:172:368)
 ",
      Symbol(hasInstance): undefined,
      Symbol(isConcatSpreadable): undefined,
      Symbol(iterator): undefined,
      Symbol(match): undefined,
      Symbol(replace): undefined,
      Symbol(search): undefined,
      Symbol(species): undefined,
      Symbol(split): undefined,
      Symbol(toPrimitive): undefined,
      Symbol(toStringTag): undefined,
      Symbol(unscopables): undefined
   }

SCRIPT5022: The custom element being constructed was not registered with `customElements`.
webcomponents-sd-ce-pf.js (165,359)

[bicknellr]

I think the reference in that commit which auto-closed this issue actually refers to the original here: https://github.com/Polymer/polymer-modulizer/issues/398.