Stimulus setup with importmaps

1

I have followed the documentation for setting up Stimulus with importmaps from the official documentation. I get the following errors:

  1. An import map is added after module script load was triggered.

  2. Uncaught TypeError: Failed to resolve module specifier “application”. Relative references must start with either “/”, “./”, or “…/”.

So #1, I literally have no idea. My head section in application.html.rb is:

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <title><%= meta_title %></title>
    <meta name="description" content="<%= meta_description %>">

    <!-- Facebook Open Graph data -->
    <meta property="og:title" content="<%= meta_title %>" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= request.original_url %>" />
    <meta property="og:image" content="<%= meta_image %>" />
    <meta property="og:description" content="<%= meta_description %>" />
    <meta property="og:site_name" content="<%= meta_title %>" />

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="<%= DEFAULT_META["twitter_account"] %>">
    <meta name="twitter:title" content="<%= meta_title %>">
    <meta name="twitter:description" content="<%= meta_description %>">
    <meta name="twitter:creator" content="<%= DEFAULT_META["twitter_account"] %>">
    <meta name="twitter:image:src" content="<%= meta_image %>">

    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   
    <%= javascript_importmap_tags "application" %>
    <%= turbo_include_tags %>

  </head>

Importmap is the first js to load which is why I don’t know what the issue is.

#2 In my index.js file the path to application is:

import application from "../../javascript/application" - which is correct, and the error says it must start with a …/ which it does.

My actual application.js looks like this:

import '@hotwired/stimulus-autoloader'
import { Application } from "@hotwired/stimulus"

import ResultsController from "./controllers/results_controller"
import FlashController from "./controllers/flash_controller"
import MenuController from "./controllers/menu_controller"
import DriverController from "./controllers/driver_controller"
import TurboResultsController from "./controllers/turbo_results_controller"
import ContentLoader from "stimulus-content-loader"
import AnimatedNumber from "stimulus-animated-number"

import '../../config/importmap'

export default function application() {

  window.Stimulus = Application.start()

  Stimulus.register("results", ResultsController);
  Stimulus.register("flash", FlashController);
  Stimulus.register("menu", MenuController);
  Stimulus.register("driver", DriverController);
  Stimulus.register('content-loader', ContentLoader);
  Stimulus.register('animated-number', AnimatedNumber);
  Stimulus.register('turbo-results', TurboResultsController);
}

If anyone knows how to fix this i’d appreciate it.

Thanks.

2

So after watching this video I decided to move away from import maps to esbuild. It only worked when I added an esbuild.config.mjs with the following js:

const path = require('path')
const rails = require('esbuild-rails')
require("esbuild").build({
entryPoints: ["application.js"],
bundle: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
plugins: [rails()],
}).catch(() => process.exit(1))

Thanks.