How to resolve Error: Unable to resolve specifier 'stimulus' error

Question

The browser console complains with:

Failed to register controller: test (controllers/test_controller) Error: Unable to resolve specifier 'stimulus' 

[the highest line of source references points to where the error is triggere

if (!(name in registeredControllers)) {
    importShim(path, 'http://localhost:3000/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js')
      .then(module => registerController(name, module, application))
      .catch(error => console.error(`Failed to register controller: ${name} (${path})`, error))
  }

the last line points to the source of the problem:

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from /*"@hotwired/stimulus-loading"*/'blob:http://localhost:3000/cf2bed28-84d1-496d-a453-7a2818e07002'
eagerLoadControllersFrom("controllers", application)

So clearly the app/javascript/controllers/test-controller.js is not firing properly. Its first line calling

import { Controller } from "stimulus"

Which I find odd, as app/javascript/controllers/application.js contains the stock code

How does one resolve the specifier 'stimulus'?
import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }

Answer 1

have you tried this way? On app/javascript/controllers/test-controller.js write this way

import { Controller } from "@hotwired/stimulus";