Webpacker 5.1 breaks recommended TypeScript controller pattern

See: https://github.com/rails/webpacker/issues/2558

Webpacker 5.1 changed the loader for TypeScript, which changed code compilation behavior, which breaks class properties.

So the controller declaration:

I have a simple Stimulus controller, defined to start as follows:

import { Controller } from "stimulus"

export default class extends Controller {
  static classes = ["hidden"]
  static targets = ["filterInput", "concert"]

  hiddenClass: string
  concertTargets: HTMLElement[]
  filterInputTarget: HTMLInputElement

  // and so on

Now breaks with a TypeError: Cannot set property hiddenClass of #<extended> which has only a getter.

[fleck]

To fix this I removed ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }] from babel.config.js and added

["@babel/plugin-transform-typescript", { 'allExtensions': true, 'isTSX': true, 'allowDeclareFields': true }], to the top of my plugins entry (anywhere above @babel/plugin-proposal-class-properties should work).

This will also allow the use of declare declare containerTarget: HTMLDialogElement; which will future proof your controllers should TS ever align more closely with the ECMA spec.

[szTheory]

Ran into this issue after upgrading to Stimulus 2.0, running a Rails app with Webpacker 5.2.1. It complains when you use targets in a Stimulus controller built in TypeScript. @fleck’s suggestion fixed it.

In babel.config.js:

    plugins: [
      "babel-plugin-macros",
      "@babel/plugin-syntax-dynamic-import",
      isTestEnv && "babel-plugin-dynamic-import-node",
      "@babel/plugin-transform-destructuring",
      // added this
      [
        "@babel/plugin-transform-typescript",
        { allExtensions: true, isTSX: true, allowDeclareFields: true },
      ],

In the TypeScript controller:

export default class extends Controller {
  static targets = ["addItem", "template"];

  // TypeScript with Stimulus 2.0 must declare properties
  // https://github.com/stimulusjs/stimulus/issues/303#issuecomment-653630360
  declare templateTarget: HTMLElement;
  declare addItemTarget: HTMLElement;