I am learning Hotwire-rails, following both the gorails.com and the Hotwire.dev examples. I am running Ruby 3.0.2 and Rails 6.1.4.1. The symptom is at the very start. After rails new xxx, I edit Gemfile to add gem ‘hotwire-rails’, then bundle install. At this point my app/javascript/packs/application.js is now:
cat app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
So that looks ok. But then rails Hotwire:install. Here is what I see (with the error messages in red.) It is as if it can’t find the file.
/mydev/public_samples/rails/hotwire_error (master) rails hotwire:install
Create controllers directory
create app/javascript/controllers
create app/javascript/controllers/index.js
create app/javascript/controllers/application.js
create app/javascript/controllers/hello_controller.js
You must import "./controllers" in your JavaScript entrypoint
Install Stimulus
run yarn add @hotwired/stimulus from "."
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @hotwired/[email protected]
info All dependencies
└─ @hotwired/[email protected]
✨ Done in 3.00s.
You must import @hotwired/turbo-rails in your JavaScript entrypoint file
Install Turbo
run yarn add @hotwired/turbo-rails from "."
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ @hotwired/[email protected]
info All dependencies
├─ @hotwired/[email protected]
└─ @hotwired/[email protected]
✨ Done in 3.73s.
Enable redis in bundle
gsub Gemfile
run bundle install
Fetching gem metadata from https://rubygems.org/............
Resolving dependencies...
Using rake 13.0.6
Using concurrent-ruby 1.1.9
Using minitest 5.14.4
Using zeitwerk 2.5.1
Using builder 3.2.4
Using erubi 1.10.0
Using racc 1.6.0
Using crass 1.0.6
Using rack 2.2.3
Using nio4r 2.5.8
Using websocket-extensions 0.1.5
Using marcel 1.0.2
Using mini_mime 1.1.2
Using public_suffix 4.0.6
Using bindex 0.8.1
Using msgpack 1.4.2
Using bundler 2.2.23
Using byebug 11.1.3
Using matrix 0.4.2
Using regexp_parser 2.1.1
Using childprocess 4.1.0
Using ffi 1.15.4
Using method_source 1.0.0
Using thor 1.1.0
Using rb-fsevent 0.11.0
Using redis 4.5.1
Using rexml 3.2.5
Using rubyzip 2.3.2
Using tilt 2.0.10
Using semantic_range 3.0.0
Using spring 3.0.0
Using sqlite3 1.4.2
Using turbolinks-source 5.2.0
Using i18n 1.8.11
Using tzinfo 2.0.4
Using nokogiri 1.12.5 (x86_64-darwin)
Using rack-test 1.1.0
Using websocket-driver 0.7.5
Using mail 2.7.1
Using addressable 2.8.0
Using bootsnap 1.9.1
Using sprockets 4.0.2
Using rb-inotify 0.10.1
Using puma 5.5.2
Using rack-mini-profiler 2.3.3
Using rack-proxy 0.7.0
Using sassc 2.4.0
Using selenium-webdriver 4.0.3
Using turbolinks 5.2.1
Using activesupport 6.1.4.1
Using loofah 2.12.0
Using xpath 3.2.0
Using listen 3.7.0
Using webdrivers 5.0.0
Using rails-dom-testing 2.0.3
Using rails-html-sanitizer 1.4.2
Using globalid 0.5.2
Using activemodel 6.1.4.1
Using capybara 3.36.0
Using jbuilder 2.11.2
Using actionview 6.1.4.1
Using activejob 6.1.4.1
Using activerecord 6.1.4.1
Using actionpack 6.1.4.1
Using actioncable 6.1.4.1
Using activestorage 6.1.4.1
Using actionmailer 6.1.4.1
Using railties 6.1.4.1
Using sprockets-rails 3.2.2
Using actionmailbox 6.1.4.1
Using actiontext 6.1.4.1
Using sassc-rails 2.1.2
Using web-console 4.1.0
Using webpacker 5.4.3
Using rails 6.1.4.1
Using sass-rails 6.0.0
Using turbo-rails 0.8.3
Using stimulus-rails 0.7.2
Using hotwire-rails 0.1.3
Bundle complete! 19 Gemfile dependencies, 79 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Switch development cable to use redis
gsub config/cable.yml
Notice in particular the two errors: You must import "./controllers" in your JavaScript entrypoint and You must import @hotwired/turbo-rails in your JavaScript entrypoint file
Looking at the stimulus source code, it looks like a different file is being checked:
if (Rails.root.join("app/javascript/application.js")).exist?
So that’s inconsistent with what I thought I needed to do.
Now I assumed these were innocuous but I am having a little trouble getting the example to work so before going crazy debugging that I wanted to chase down those error messages. Nobody else seems to be getting them. Is it a newly introduced bug or something?
3
Answers
This seems like everything is working correctly rails just likes to output what its doing to the console but it should have added those to your file.
With a default install of rails with webpacker there should be an entrypoint file at
app/javascript/packs/application.js
already with some default code. If not did you enable webpacker? Tryrails webpacker:install
and then you should have the entrypoint where you can addimport '../controllers'
andimport '@hotwired/turbo'
.In my case I was using the
stimulus-rails
library and the same message popped up.After digging further I discovered that in the source code, it is expecting an application.js in the root of your app/javascript folder.
if (Rails.root.join("app/javascript/application.js")).exist?
say "Import Stimulus controllers"
append_to_file "app/javascript/application.js", %(import "./controllers"n)
else
say %(You must import "./controllers" in your JavaScript entrypoint), :red
end
If that file doesn’t exist, it shows the error that.
There are two solutions to this.
Add
application.js
to theapp/javascript
folder, runrails stimulus:install
again and theapplication.js
the entry point of your appAdd
import "../controllers"
to the entry point of you rails javascript. In my case, it was theapp/javascript/packs/application.js
and everything should work fine when you reload the page.