Tools: 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.

[moderndeveloperllc]

@bicknellr Should this issue be renamed? That commit is released, but @web-padawan indicates the issue persists.

[web-padawan]

@bicknellr @justinfagnani I was wondering if you have any plans regarding this issue? Babel is now RC and we still have to pin the plugin version, and looks like there is no opened ticket in their repo.

As you have more understanding about what behaviour is needed, and can formulate it better, could you submit the issue there? Also, do I understand correctly that it is only needed for IE11 now, as the native-shim uses Reflect.construct and therefore should work fine when transpiled to ES5?

[justinfagnani]

@bicknellr could you file a new issue on Babel with the small repro we were working on?

@web-padawan another development here is that we don't need this transform as much because we made a new custom-elements-es5-adapter shim that works with both ES5-style classes and real classes. @bicknellr has that been released with the polyfills yet?

[bicknellr]

Filed: https://github.com/babel/babel/issues/8496

[hzoo]

There's a fix https://github.com/babel/babel/pull/8501 if anyone wants to verify

[bicknellr]

Sorry, I've been trying to verify this but I'm having trouble using npm link to set up our tools with a locally built version of Babel.

[hzoo]

Could also copy the diff in https://github.com/babel/babel/pull/8501/files#diff-f3afc82f08eb675b17f723219bd1ee36 if thats easier since its just the helper change?

[web-padawan]

Should be closed by #670

[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.