CODEWITHSUNDEEP
javascriptruby-on-railsstimulusjs
Heartcroft
Heartcroft

Reputation: 1712

Can't import a Stimulus component to my Rails application: Uncaught TypeError: Failed to resolve module specifier

Tried to follow te set up guide for this NestedForm Stimulus component: Installation

Like so:

$ npm install stimulus-rails-nested-form --save

app/javascript/controllers/application.js

import { Application } from "@hotwired/stimulus"
import NestedForm from 'stimulus-rails-nested-form' // Added this

const application = Application.start()
application.register('nested-form', NestedForm) // Added this

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

export { application }

And I'm getting:

Uncaught TypeError: Failed to resolve module specifier "stimulus-rails-nested-form". Relative references must start with either "/", "./", or "../".

I can see the package properly installed in the node_modules directory and Stimulus is getting loaded properly as I'm using it in other places of the application.

enter image description here

I'm on Rails 7.0.4.

Appreciate any help, cheers!

Upvotes: 0

Views: 1459

Answers (2)

Mohammad Habibur Rahman
Mohammad Habibur Rahman

Reputation: 411

you should use import { Controller } from '@hotwired/stimulus' in your javascript controller example: hello_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("you are good boy")
  }
}

Upvotes: 1

tkhobbes
tkhobbes

Reputation: 682

If you share a bit more about your rails setup that might help.

Your Rails app might not know about your javascripts... have a look here: https://guides.rubyonrails.org/working_with_javascript_in_rails.html

You will either need to use importmaps (in which scenario you wouldn't need npm), or you use esbuild or webpack (I would not recommend the latter).

Upvotes: 2

Related Questions