Failed to fetch dynamically imported module

Need help with error.

stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js:27 Failed to register controller: todos--draggable-list (controllers/todos/draggable_list_controller) TypeError: Failed to fetch dynamically imported module:

Here is the import statements.

import {Controller} from "@hotwired/stimulus"
import {Sortable} from "sortablejs";
import {AppHttpClient} from "app_http_client";

While my importmap.rb looks like this.

# Pin npm packages by running ./bin/importmap

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: ''
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin_all_from 'app/javascript/turbo_streams', under: 'turbo_streams'
pin 'sortablejs', to: ''
pin 'hotkeys-js', to: ''
pin 'stimulus-use', to: ''
pin 'jquery', to: ''
pin '@rails/request.js', to: ''
pin '@hotwired/turbo', to: ''

# Custom javascript files
pin 'app_http_client', preload: true
pin 'application_contants', preload: true

There were some other controllers that we throwing this error, however, I fixed it But this controller lives in a nested directory like app/javascript/controllers/todos/blah_controller.js Could that be causing the problem?

1 Like

Does your browser report any loading errors in the dev tools > network tab?

Yep. It shows 404

Could it be due to that I am exporting a function as well as a class from a single js file?

export async function turboPatch(url, body){}
export class AppHttpClient {}

I can’t edit this post, so kindly ignore this. Because it was never working. I can’t use files of the javascript root folder.


The problem was that one of the two files that exist in the root javascript (app/javascript) folder was importing another through relative importing.

Solve it by importing it the correct way (not using relative import).