Webpacker 4 upgrade breaks Babel class-properties plugin

1

I’m updating my app to Rails 5.2.3, which move from Webpacker 3 -> 4. I’ve hit an issues where my Stimulus controllers aren’t compiling:

BabelLoaderError: SyntaxError: Unexpected token (14:17)

  12 | export default class extends Controller {
  13 |
> 14 |   static targets = [ "output" ]
     |                  ^
  15 |
  16 |   connect() {
  17 |     this.outputTarget.textContent = 'Hello, Stimulus!'

From what I’ve found this is fixed with @babel/plugin-proposal-class-properties, but I have this plugin in my babel.config.js and am still seeing the issue. Any ideas on what else would be causing this?

2

Solved this. I’d updated the Rails and Webpacker gem, but not the Webpacker npm module. Following through this GitHub issues I did the following:

yarn add @rails/webpacker
yarn add webpack-cli
bundle exec rails webpacker:install

And then followed the prompts.

3 Likes