0

I'm working on a personal development application with Rails7+Tailwind, and I implemented the code to delete flash messages in stimulus with reference to a web article.

I'm having trouble solving the problem that Stimulus (erasing Flash messages) that was running on Local doesn't work when deployed on Heroku.

Codes of the part related to the following, so If you have any doubts, please let me know.

Development environment.
Rails 7.0.2.4.
ruby 3.1.2p20

Error messages on heroku logs is as followings.

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 is as followings.

<!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>

Where the part which is used stimulus.

<% 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)
mojaomi
  • 115
  • 6
  • it looks like you are using importmaps, but it looks like you javascript folder is set up for esbuild. I think you only register stuff that is not local. My guess – appleII717 Jun 22 '22 at 12:55
  • thanks for your reply. Would you please let me know if there is a reference site? – mojaomi Jun 24 '22 at 01:44
  • I assume you created the rails app with defaults (importmap). your javascript folder's application.js and controllers index.js should follow setup using https://github.com/hotwired/stimulus-rails – appleII717 Jun 25 '22 at 17:36
  • Thanks to the advice, I was able to confirm that stimulus works even in the heroku environment. Thank you very much. – mojaomi Jul 01 '22 at 02:20

1 Answers1

0

As commented by appleII717, the cause was that the folder structure used esbuild even though importmap was used.
The reference source which I copied the code of stimulus is using esbuild, but I have not noticed about that.
By modifying the folder configuration for importmap, stimulus now works even in heroku environment!
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)
mojaomi
  • 115
  • 6