Failed to fetch dynamically imported module

1

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: https://sprint.backyardcode.com/assets/controllers/todos/draggable_list_controller-dd7274170a9033e834959c481af84aba2f4d70b33802c9b11027d9a2c06b126c.js

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: 'https://ga.jspm.io/npm:@hotwired/stimulus@3.2.1/dist/stimulus.js'
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: 'https://ga.jspm.io/npm:sortablejs@1.15.0/modular/sortable.esm.js'
pin 'hotkeys-js', to: 'https://ga.jspm.io/npm:hotkeys-js@3.10.1/dist/hotkeys.esm.js'
pin 'stimulus-use', to: 'https://ga.jspm.io/npm:stimulus-use@0.52.0/dist/index.js'
pin 'jquery', to: 'https://ga.jspm.io/npm:jquery@3.6.3/dist/jquery.js'
pin '@rails/request.js', to: 'https://ga.jspm.io/npm:@rails/request.js@0.0.8/src/index.js'
pin '@hotwired/turbo', to: 'https://ga.jspm.io/npm:@hotwired/turbo@7.3.0/dist/turbo.es2017-esm.js'

# 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
2

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

3

Yep. It shows 404

image
image1349×35 5.09 KB

4

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 {}
5

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.

6

SOLVED IT:

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).