When i switched my webapp (first one i ever built) to a new laptop i get this error in the browser console:
settings:1 Uncaught TypeError: Failed to resolve module specifier "chartkick/chart.js". Relative references must start with either "/", "./", or "../".
Also Turbo and Stimulus aren't found:
VM6808:1 Uncaught ReferenceError: Stimulus is not defined
at <anonymous>:1:1
Turbo
VM6819:1 Uncaught ReferenceError: Turbo is not defined
at <anonymous>:1:1
The sidebar i made using tailwind and flowbite stopped working, but other components that use the too work just fine. This is my first project so im kinda lost.
I will attach what files i think are needed but i will gladly send other code snippets. This is my importmap: "config/importmap.rb"
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.3
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.turbo.min.js"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "chartkick", to: "chartkick.js"
pin "chart.js", to: "chart.js"
pin "Chart.bundle", to: "Chart.bundle.js"
pin "@kurkle/color", to: "@kurkle--color.js" # @0.3.4
My application.js from "app/javascript/application.js"
import "@hotwired/turbo-rails";
import "./controllers";
import 'flowbite';
import "chartkick"
import "chartkick/chart.js"
import "Chart.bundle"
import "chartjs-adapter-date-fns"
import Rails from "@rails/ujs";
Chartkick.use(Chart)
Rails.start()
My application.js from "app/javascript/controllers/application.js"
import { Application } from "@hotwired/stimulus"
const application = Application.start()
application.debug = false
window.Stimulus = application
export { application }
document.addEventListener('turbo:load', () => {
window.dispatchEvent(new Event('load'));
});
And the application.html.erb which is a mess but it worked without any problem:
<!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Inventory A" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :head %>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<%= javascript_importmap_tags %>
</head>
<body class = "font-sans">
<% unless (
[ "sessions", "users"].include?(controller_name) ||
(["items", "subscriptions"].include?(controller_name) &&
["audit", "edit", "new", "show"].include?(action_name)))
%>
<%= render "shared/sidebar" %>
<% end %>
<%unless (["sessions", "users"].include?(controller_name) ||
["application"].include?(controller_name))
%>
<div class=" flex justify-center items-center h-full p-6">
<%= render 'shared/breadcrumbs' %>
<%= yield :top_actions %>
</div>
<% end %>
<div id = "Anunturi">
<% if notice %>
<div class="flash notice" id="flash-notice"><%= notice %></div>
<% end %>
<% if alert %>
<div class="flash alert" id="flash-alert"><%= alert %></div>
<% end %>
</div>
<main>
<%= yield %>
</main>
</body>
</html>
I am on ruby on rails with these versions Rails 8.0.2 and ruby 3.4.5 and importmap.
So i came back with the answer:
1. First i deleted a generated stimulus file
2. Changed application.js to this:
import "@hotwired/turbo-rails";
import "controllers";
import 'flowbite';
import "chartkick"
import "chart.js"
import "Chart.bundle"
// import "chartjs-adapter-date-fns"
Chartkick.use(Chart)
import "controllers"
3. Changed index.js to this:
import { application } from "./application"
import { eagerLoadControllersFrom } from "../../assets/javascripts/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
import PreferencesController from "./preferences_controller"
application.register("preferences", PreferencesController)
4.Changed my importmap to this:
pin "application"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.turbo.min.js"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "chartkick", to: "chartkick.js"
pin "chart.js", to: "https://ga.jspm.io/npm:chart.js@4.2.0/dist/chart.js"
pin "Chart.bundle", to: "Chart.bundle.js"
pin "@kurkle/color", to: "@kurkle--color.js"
5.Deleted chartjs adapter from my package.json|
Hope this will help anyone and thank you for the suggestions