我正在使用Rails7+Tailwind开发一个个人开发应用程序,并且我实现了在参考web文章的刺激中删除flash消息的代码。
我在解决本地运行的刺激(擦除Flash消息)在Heroku上部署时不起作用的问题时遇到了麻烦。
代码的部分与以下内容有关,所以如果你有任何疑问,请告诉我。
开发环境。
Rails 7.0.2.4。
ruby 3.1.2p20
heroku日志中的错误信息如下:
2022-06-02T07:51:13.858354+00:00 app[web.1]: F, [2022-06-02T07:51:13.858304 #4] FATAL -- : [a7811503-f91a-4d6e-9a5d-978744f7129b]
2022-06-02T07:51:13.858355+00:00 app[web.1]: [a7811503-f91a-4d6e-9a5d-978744f7129b] ActionController::RoutingError (No route matches [GET] "/assets/controllers/flash_controller.js"):
app/views/layouts/application.html.erb
如下。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= render 'layouts/shim' %>
<title><%= page_title(yield(:title)) %></title>
</head>
<body class="pb-420 box-border">
<main>
<%= render 'shared/navbar' %>
<%= render partial: 'shared/flash' %>
<div class="w-full">
<%= yield %>
<%= render 'shared/footer' %>
</div>
</main>
</body>
</html>
其中使用刺激的部分。
<% flash.each do |key, value| %>
<div data-controller="flash" class="flex items-center fixed top-5 right-5 <%= css_class_for_flash(key) %> py-3 px-5 rounded-lg">
<div class="mr-4"><%= value %></div>
<button type="button" data-action="flash#dismiss">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<% end %>
app/javascript/controllers/flash_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
setTimeout(() => {
this.dismiss();
}, 3000);
}
dismiss() {
this.element.remove();
}
}
app/javascript/controller/index.js
import { application } from "./application"
import FlashController from "./flash_controller.js"
application.register("flash", FlashController)
正如appleII717所评论的那样,原因是文件夹结构使用了esbuild,尽管使用了importmap。
我复制刺激代码的参考源是使用esbuild的,但我没有注意到这一点。
通过修改importmap的文件夹配置,现在即使在heroku环境中也可以使用刺激物了!app/javascript/controller/index.js
// Import and register all your controllers from the importmap under controllers/*
import { application } from "controllers/application"
// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)