Use webpack and babel-loader, @query is undefined

[WUSO01]

Description

I wirted lit-element with typescript, i use webpack and babel compile my project. When i use babel-loader, console.log(@query('xxx')) is undefined, but i find ts-loader won't occur this problem.

This is the minimalist demo:

index.ts:

import { customElement, LitElement, html, query } from 'lit-element'

@customElement('custom-container')
export class CustomContainer extends LitElement {
  @query('#btn') btnEle: HTMLButtonElement

  firstUpdated () {
    console.log('this.btn is:', this.btnEle)
    this.btnEle.addEventListener('click', () => {
      console.log('click')
    })
  }

  render () {
    return html`
      <div>
        <button id="btn">button</button>
      </div>
    `
  }
}

webapck.config.js:

module.exports = {
  // ...
  module: {
   rules: [
      {
        test: /\.ts?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          cacheDirectory: true,
          cacheCompression: false
        }
      }
    ]
  }
}

babel.config.json:

{
  "presets": [
    "@babel/env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators", {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties"
    ]
  ]
}

Demo source file

The issues：

[sorvell]

Can you see if the decorator settings here work? This is what we use for testing: https://github.com/Polymer/lit-element/blob/master/.babelrc#L3.

If you'd like additional help debugging the issue, it'd be great if you could provide a minimal runnable reproduction. A simple github repo would be fine.

Hope that helps.

[sorvell]

Closing due to age. Please open a new issue with a reproduction if the problem still exists. Thanks.