Stimulus: Module parse failed error

[joeybeninghove]

Hey guys,
Pardon my ignorance with TypeScript, but is there something, in particular, I need to do to account for the use of TypeScript internally with Stimulus? I'm getting this error when following the handbook for installation with Webpack:

index.ts:33 Uncaught Error: Module parse failed: Unexpected token (4:17)
You may need an appropriate loader to handle this file type.
| 
| export default class extends Controller {
|   static targets = [ "text" ]
| 
|   copy() {
    at Object.<anonymous> (index.ts:33)
    at __webpack_require__ (index.ts:30)
    at webpackContext (index.ts:33)
    at definitionForModuleWithContextAndKey (index.ts:33)
    at index.ts:33
    at Array.map (<anonymous>)
    at definitionsFromContext (index.ts:33)
    at Object.<anonymous> (index.ts:33)
    at __webpack_require__ (index.ts:30)
    at ElementObserver.start (index.ts:33)

Do I need to set up typescript and ts-loader myself within my webpack config to allow proper compilation? It didn't cause any issues until I added in that line with the static keyword.

Any ideas?

[sbennett33]

I ran into the same problem.

ES6 doesn't support class variables, so you'll need to provide a static getter.

static get targets() {
  return [ "text" ]
}

Seemed to work for me.

Good luck 👍

[jeremy]

Use the transform-class-properties Babel plugin to support static class properties.

Check out stimulus-starter for an example setup, including the PR that added transform-class-properties.

[sstephenson]

Do I need to set up typescript and ts-loader myself within my webpack config to allow proper compilation?

Yes.

It didn't cause any issues until I added in that line with the static keyword.

TypeScript supports static class properties out of the box, but you haven’t configured ts-loader, so webpack is just treating your .ts file as JavaScript.

If you don’t want to use TypeScript you’ll need Babel with the transform-class-properties plugin.

Soon enough, this will all be a part of the standard, I hope! :)

[joeybeninghove]

Thanks so much @jeremy and @sstephenson! 😎

_{Sent with GitHawk}