Modern Front-End Development for Rails

Installing Stimulus

We’ve already installed Stimulus as part of the hotwire-rails gem install. However, Stimulus depends on static class attributes, which are not a part of standard JavaScript. That works fine with the default setup if we were writing JavaScript, but in order to get the class attributes to run in TypeScript, we need to change the Babel setup in package.json to this:

"babel": {
    "presets": [
      [
        "./node_modules/@rails/webpacker/package/babel/preset.js"
      ],
      ["@babel/preset-typescript"]
    ]
  }

I’m honestly not 100 percent sure why this is necessary (the TypeScript preset is already loaded in the default file), but I think it might have something to do with the order in which presets are loaded.

Let’s look at the ...