TypeError: Illegal invocation in custom-style.js with Babel v7.0.0-beta.51

[web-padawan]

Description

After upgrading to Babel v7.0.0-beta-51 released today, I get the following error:

custom-style.js:81 Uncaught TypeError: Illegal invocation
    at HTMLElement.getStyle (custom-style.js:81)
    at CustomStyleInterface.getStyleForCustomStyle (custom-style-interface.js:85)
    at CustomStyleInterface.processStyles (custom-style-interface.js:101)
    at ApplyShimInterface.flushCustomStyles (apply-shim.js:64)
    at Object.prepareTemplate (apply-shim.js:145)
    at processElementStyles (element-mixin.js:269)
    at Function._finalizeTemplate (element-mixin.js:518)
    at HTMLElement._initializeProperties (element-mixin.js:459)
    at HTMLElement.PropertiesChanged (properties-changed.js:160)
    at HTMLElement.PropertyAccessors (property-accessors.js:95)

Steps to Reproduce

1. Clone the repo:

git clone https://github.com/web-padawan/polymer3-webpack-starter

2. Checkout to broken branch:

cd polymer3-webpack-starter && git checkout bug/babel-51

3. Install and run application:

npm i && npm run dev

4. Open http://127.0.0.1:3000 and see the console

Expected Results

No error thrown, as with Babel 7.0.0-beta.49 (same repo, master branch).

Actual Results

Error is thrown on this line. Babel inserts line break when transpiling it, but this also happened with 7.0.0-beta.49 and worked nice, so the true reason is likely somewhere else:

var style =
/** @type {HTMLStyleElement} */
this.querySelector('style');

Browsers Affected

Not browser-specific.

Versions

• Polymer: v3.0.2
• webcomponents: v2.0.0

I wasn't really sure whether I needed to file this issue under Babel repo, but let's start here.

/cc @bicknellr and note that I didn't upgrade the @babel/plugin-transform-classes, so the problem here is different one from the Polymer/tools#398 but also worth taking a look.

If you are able to confirm this is a Babel issue, feel free to close it and let's raise a new issue there.

[TimvdLippe]

@web-padawan If you remove the cast from the closure source, e.g.

const style = this.querySelector('style');

Does this issue persist? I suspect it is babel not being able to work with the Closure cast in a variable declaration.

[web-padawan]

@TimvdLippe yep that helped when I was investigating in the morning. For some reason, after I regenerated package-lock.json the issue no longer occurs. Probably it was incorrect dependency. Thanks for taking a look, will reopen if it will occur again.

[web-padawan]

Actually, we have a reproduction for this issue here: vaadin/base-starter-react#12

So I'm reopening the issue for now.

@TimvdLippe should we file a bug about the Closure cast failure to the Babel repo? Or is there a way to workaround it here? I'm not really familiar with the Closure annotations.

[TimvdLippe]

@web-padawan Yes this looks like a Babel parser issue to me. It is perfectly valid JS to write.

[TimvdLippe]

@web-padawan Were you able to report this issue to Babel?

[web-padawan]

@TimvdLippe sorry, did not get a chance to create a reduced test case, but will hopefully get to it soon. Closing this issue, as it appears there is nothing much to do here for Polymer codebase.

[quetzalsly]

Sorry to re-open this but I couldn't find the description of this problem anywhere else on the internet. I also get this error with polymer and webpack:

var e = this.querySelector("style");

Remaking the package-lock or node-modules has no effect, same error happens.
Is the babel team aware of this issue? Would be really nice to get this fixed instead of downgrading things.