Marcel Gierak said over 1 year ago on Custom Turbo Stream Actions :
hi,
when i create turbo_streams folder and the index.js and toast.js file and I get error in console in index.js import "./toast.js" line.
GET http://localhost:3000/assets/toast net::ERR_ABORTED 404 (Not Found)
i try to but nothing
i tried rails assets:precompile but it didn't help either
how can i solve it?

David Kimura PRO said over 1 year ago on Custom Turbo Stream Actions :
You shouldn't have to run the precompile to get it working. Are you using esbuild or importmap for your application?

Marcel Gierak said over 1 year ago on Custom Turbo Stream Actions :
thanks for the quick reply.
Yes I use importmap and imported toastify-js via importmap pin toastify-js

thomas said over 1 year ago on Custom Turbo Stream Actions :
If you are using rails 7, chances are you are using the new importmap feature. Rails 7 is loading Turbo through the turbo-rails gem and importmap '@hotwired/turbo-rails', like so:
# config/importmap.rb
# you should see the following line
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true

To access TurboStreams, don't import `@hotwired/turbo` nor `StreamActions`. Instead use Turbo made available in the window:
# app/javascript/turbo_streams/toast.js
# here we removed import { StreamActions } from ...
# and we use Turbo made available with turbo-rails gem instead
window.Turbo.StreamActions.toast = function() {
...
}
The new importmap feature aims to remove yarn dependency. To use toastify-js, you can add it to your config>importmap.rb
# config/importmap.rb
pin "toastify-js", to: "https://ga.jspm.io/npm:toastify-js@1.12.0/src/toastify.js"
Then add the css tag in your view/layout
app/views/layouts/application.html.erb
<head>
...
<%= stylesheet_link_tag "application", "https://ga.jspm.io/npm:toastify-js@1.12.0/src/toastify.css", "data-turbo-track": "reload" %>
</head>

Hope that helps.

Login to Comment