Rails for Front-end Development: Essential Tools/

...

/

Installing Stimulus

Installing Stimulus

Learn to install Stimulus locally in this lesson.

We'll cover the following...

Configuration

We’ve already installed Stimulus as part of the hotwire-rails gem install. Stimulus depends on static class attributes, however, 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"]
    ]
  }

We can’t say exactly why this is necessary (the TypeScript preset is already loaded in the default file), but it might have something to do with the order in which presets are loaded.

Let’s look at the code we have generated in the main pack file. As is mentioned earlier, the default code generated by Rails and Webpacker is still not settled for Webpacker 6 as of now, so the code might look different in the future.

Press + to interact
import "@hotwired/turbo-rails"
import "channels"
import "controllers"
import "core-js/stable"
import "regenerator-runtime/runtime"
import * as ActiveStorage from "@rails/activestorage"
import Rails from "@rails/ujs"
Rails.start()
ActiveStorage.start()

Because of how ...