I'm having an issue now with a custom stimulus controller.. works locally and not in production, I get a 404 on loading the asset. 🧵

Hello @narrow-magazine-18722, what kind of license are you using? Community or pro?

Trial of Pro

Are you experiencing other errors with assets or only this one?

So I ran

bin/importmap json

on production as well, and the two missing items compared to my local run are

avo.custom

and

controllers/product_resource_controller

Did you follow this documentation? https://docs.avohq.io/2.0/custom-asset-pipeline.html#use-importmap-to-add-your-assets

Yep I ran the

avo:js:install

generator and added my controller as above

For what i see on the logs I think there are 2 possibilities: 1 -

avo.custom.js

is on the wrong dir 2 -

avo.custom.js

is on the right dir but the configured path is wrong I'm not the best person to help you with this issue, maybe @lemon-wall-20836 can understand this better

I appreciate it! My first time working with importmaps... I heard this might change in avo 3, and that maybe everyone hates importmaps

hey dan, the importmap integration should just work

I can see in the network tab that it does grab the precompiled

avo.custom

asset correctly (which makes sense because that is the only ref to the controller) I tried bumping

Rails.application.config.assets.version

for fun to no effect

so the file grabbed you see in the network tab is the right one?

Yeah, the

avo.custom

file is correct

and where do you get the 404?

When it loads the custom controller from the

import

statement -- it's trying to load just

assets/controllers/product_resource_controller

and not the version with the precompiled hash in the filename

are you using the

eagerLoadControllersFrom

method?

In

index.js

javascript
// Import and register all your controllers from the importmap under controllers/*

import { application } from "controllers/application"

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("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)

The controller is inside

./controllers

how does your

importmap.rb

file looks like?

🤔 yeah I can try that, should I move the controller to

avo_controllers

?

not necesarily

yeah, and I have those lines except the last one

hmmm

diff
-import ProductResourceController from './controllers/product_resource_controller'
+import { default as ProductResourceController } from 'controllers/product_resource_controller'

I'm trying this in the meantime

and do you have

import "controllers"

in your

avo.custom.js

file?

No, just this

javascript
import { default as ProductResourceController } from 'controllers/product_resource_controller'

// Hook into the stimulus instance provided by Avo
const application = window.Stimulus
application.register('product-resource', ProductResourceController)

// eslint-disable-next-line no-console
console.log('Hi from Avo custom JS 👋')

The diff above is that first line

ok. let me try this

That change I made actually worked too

can you show me

product_resource_controller.js

?

maybe the

./controllers/

vs

controllers/

?

yup

It's basically the

courses_controller

from https://docs.avohq.io/2.0/stimulus-integration.html#custom-stimulus-controllers

that's interesting the

export default class extends Controller

statement usually is imported as

import NAME from 'controllers/NAME.js

with

import { default as ProductResourceController } from 'controllers/product_resource_controller'

yes

🤷‍♂️

I'm betting it was the

./

, I'll try

import ProductResourceController from 'controllers/product_resource_controller'

next time I deploy

yup! could be