I am having trouble displaying my toast messages in rails using importmaps default setup. This is my code.
This is my layout file
<!DOCTYPE html>
<html>
<head>
<title>Toastr</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
</head>
<body>
<% if flash[:notice].present? %>
<script type="module">
toastr.success("<%= notice%>");
</script>
<% end %>
<p style="color: green"><%= notice %></p>
<%= yield %>
</body>
</html>
This is my importmap.rb
# Pin npm packages by running ./bin/importmap
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
# NOTE: pin jquery to jsdelivr instead of jspm
pin "jquery", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"
This is my application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "jquery";
console.log($);
console.log(jQuery);
In application.js, it gives me console that means jquery is loaded.
Now whenever there is a flash messages, it gives me this error
toastr.js:474 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
at m (toastr.js:474:40)
at Object.i [as success] (toastr.js:474:40)
at 13:2:8
When I add a jquery cdn in application.html.erb also, then this error is gone, I dont know why because I already leaded my jquery in application.js