Webpacker 4 upgrade breaks Babel class-properties plugin

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?

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