Not sure what am I doing wrong :(. Trying to use stimulus js with importmap seems like not working!
Rails version: 7.0.3.1
# config/importmap
pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin 'polaris-view-components', to: 'https://ga.jspm.io/npm:polaris-view-components@0.11.0/app/assets/javascripts/polaris_view_components.js'
pin '@rails/request.js', to: 'https://ga.jspm.io/npm:@rails/request.js@0.0.6/src/index.js'
pin 'web-vitals', to: 'https://ga.jspm.io/npm:web-vitals@2.1.4/dist/web-vitals.js'
# Shopify
pin '@shopify/app-bridge', to: 'https://unpkg.com/@shopify/app-bridge@3.2.5/umd/index.js'
pin '@shopify/app-bridge-utils', to: 'https://unpkg.com/@shopify/app-bridge-utils@3.2.5/umd/index.js'
pin '@shopify/app-bridge/actions', to: 'https://unpkg.com/@shopify/app-bridge@3.2.5/actions/index.js'
pin_all_from 'app/javascript/controllers', under: 'controllers'
In application.js
// app/javascript/application.js
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "controllers"
Inside stimulus controllers:
// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.warnings = true
application.debug = false
window.Stimulus = application
export { application }
And finally:
// app/javascript/controllers/index.js
// Import and register all your controllers from the importmap under controllers/*
import { application } from "controllers/application"
// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
lazyLoadControllersFrom("controllers", application)
And I think importmap compiling accordingly:
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-6e7593bb66d82cc1c4431a4a9a1e0c210a460939c40aa80574cbdc0045a45ea2.js",
"@hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
"@hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
"polaris-view-components": "https://ga.jspm.io/npm:polaris-view-components@0.11.0/app/assets/javascripts/polaris_view_components.js",
"@rails/request.js": "https://ga.jspm.io/npm:@rails/request.js@0.0.6/src/index.js",
"web-vitals": "https://ga.jspm.io/npm:web-vitals@2.1.4/dist/web-vitals.js",
"@shopify/app-bridge": "https://unpkg.com/@shopify/app-bridge@3.2.5/umd/index.js",
"@shopify/app-bridge-utils": "https://unpkg.com/@shopify/app-bridge-utils@3.2.5/umd/index.js",
"@shopify/app-bridge/actions": "https://unpkg.com/@shopify/app-bridge@3.2.5/actions/index.js",
"controllers/application": "/assets/controllers/application-fd899a79d725e09cf8a8f5b8ddc360c741bb0ea013c8f985592698fd69fe94aa.js",
"controllers/flash_controller": "/assets/controllers/flash_controller-ee865f287b6f91beb171ff0dba3b4564b3b96c484ee2320135e8355c5dfafdb9.js",
"controllers": "/assets/controllers/index-89e4cba1a728a329bcda0dc501b50dc464aa427ed97df480a59c0973aa189057.js",
"controllers/shopify_controller": "/assets/controllers/shopify_controller-2ab140df861556f20f2a74220540d62d88d282bbafcdc25f9072ad25806d0349.js"
}
}</script>
So I think everything is okay, but while it trying to load any of these controllers, it's showing this error:
Failed to autoload controller: flash ReferenceError: exports is not defined
Not sure how to resolve this issue, already wasted a lot of time. Any help would be appropriated!