在Rails / Turbo / Hotwire中，运行一个简单示例时出错

Question

我正在学习Hotwire-rails，跟随gorails.com和Hotwire.dev的示例。 我运行的是Ruby 3.0.2和Rails 6.1.4.1。症状出现在最开始时。在rails new xxx之后，我编辑Gemfile添加gem 'hotwire-rails'，然后bundle install。此时我的app/javascript/packs/application.js如下：

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()

那看起来没问题。但是运行Rails Hotwire:install时，这是我看到的（错误信息为红色）。好像它找不到文件。

/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/stimulus@3.0.1
info All dependencies
└─ @hotwired/stimulus@3.0.1
✨  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/turbo-rails@7.0.1
info All dependencies
├─ @hotwired/turbo-rails@7.0.1
└─ @hotwired/turbo@7.0.1
✨  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

特别注意两个错误：必须在JavaScript入口点中导入“./controllers”，以及必须在JavaScript入口点文件中导入@hotwired/turbo-rails。

查看stimulus源代码，似乎正在检查不同的文件。

if (Rails.root.join("app/javascript/application.js")).exist?

所以这与我认为我需要做的事情不一致。

我原以为这些是无害的，但我在让例子工作时遇到了一些麻烦，因此在进行疯狂调试之前，我想追查一下那些错误消息。似乎没有其他人遇到这些问题。这是一个新引入的错误还是什么？

- pitosalas

Answer 1

在我的情况下，我使用了stimulus-rails库，并且出现了相同的错误信息。

您必须在JavaScript入口点中导入“./controllers”

经过进一步的挖掘，我发现在源代码中，它期望在您的app/javascript文件夹的根目录中有一个application.js文件。 if (Rails.root.join("app/javascript/application.js")).exist? say "导入Stimulus控制器" append_to_file "app/javascript/application.js", %(import "./controllers"\n) else say %(您必须在JavaScript入口点中导入“./controllers”), :red end 如果该文件不存在，则会显示该错误消息。

有两个解决方案：

1. 将application.js添加到app/javascript文件夹中，再次运行rails stimulus:install，并将application.js设置为应用程序的入口点。

2. 在您的rails javascript入口点中添加import "../controllers"。在我的情况下，它是app/javascript/packs/application.js，当您重新加载页面时，一切都应该正常工作。

- Ayodeji

Answer 2

使用默认的Rails和Webpacker安装，应该已经有一个入口文件位于app/javascript/packs/application.js，其中包含一些默认代码。如果没有，请确认是否启用了Webpacker？尝试执行rails webpacker:install命令，然后您就可以在入口文件中添加import '../controllers'和import '@hotwired/turbo'。

- Coder2000

---

我的配置有点诡异（可能是Ruby或Rails的特定版本的问题？）。我已经更新了我的问题，并提供更多细节。 - pitosalas

你有代码库可以分享吗？ - Coder2000

Answer 3

这似乎一切正常，Rails只是喜欢将其操作输出到控制台，但它应该已经将它们添加到您的文件中了。

- yungindigo

---

JavaScript 的入口文件是 app/javascript/application.js，当你运行任务时，Turbo 会将这些导入语句放到那里。 - yungindigo

Ruby 3.0.2 和 Rails 6.1.4.1 - pitosalas

npm 6.13.4 - 但请查看我在 OP 中的新信息。究竟是哪个文件是“入口点”- 我看到了两种不同的东西。我开始认为这是一个实际的错误（虽然很小）。 - pitosalas

我有app/javascripts，但没有app/assets/javascript。 - pitosalas

这是因为在 Rails 7 中，他们使用 javascript 文件夹来代替 assets 来存放 JavaScript。 - yungindigo