Alert example throws error: v3.0.3 & Stimulus v3.01

[Nathan Jones]

Error is thrown on connect and on click action.

[Chris Oliver]

Can you click on that line in Stimulus.js and share what that is? Curious where it's falling over inside Stimulus. Looks to be the classes API.

[Nathan Jones]

@excid3

[Chris Oliver]

According to the docs, we're using that properly? https://stimulus.hotwired.dev/reference/css-classes#properties

[Nathan Jones]

I think it's because the example doesn't declare a class for the controller to use in the HTML, like:

data-search-loading-class="bg-gray-500 animate-spinner cursor-busy">

At least, that's what it looks like in the docs.

Declare a css class reference, then declare the class on the data attribute.

[Chris Oliver]

Ah, so maybe its undefined or null instead of an empty array?

[Chris Oliver]

Removing the classes on the first alert example correctly gave me [] and the other is an array as well.

Looks like it's working correctly?

Are you using @hotwired/stimulus

[Nathan Jones]

Yep

Does it matter what version of Rails I'm on?

Going to clear my yarn cache and see if that resolves the issue.

I'm still not seeing the data-attribute mapping for these classes in the example though.

[Chris Oliver]

Hmm, I guess can you stick a console.log() in the node_modules and see if it's not an array for your example?

[Nathan Jones]

I wish I could just start over on Rails 7 lmao

When I dig into my node_modules, propertiesForClassDefinition is not matching the current version somehow.

I was importing Stimulus from the wrong package, so let me update those refs and get back to you.

[Nathan Jones]

Ok so, I updated my references and received a fun new error.

app/javascript/controllers/index.js

// Load all the controllers within this directory and all subdirectories.
// Controller files must be named *_controller.js.

import { Application } from "@hotwired/stimulus"
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
import { Autocomplete } from 'stimulus-autocomplete'

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))

application.register('autocomplete', Autocomplete)

import { Alert, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
application.register('alert', Alert)
application.register('dropdown', Dropdown)
application.register('modal', Modal)
application.register('tabs', Tabs)
application.register('popover', Popover)
application.register('toggle', Toggle)
application.register('slideover', Slideover)

import Flatpickr from 'stimulus-flatpickr'
application.register('flatpickr', Flatpickr)

import StimulusReflex from 'stimulus_reflex'
import consumer from '../channels/consumer'
import controller from './application_controller'
StimulusReflex.initialize(application, { consumer, controller, debug: false })

[Nathan Jones]

Ok it actually looks like my install of StimulusReflex is causing issues with my controllers, since I'm in the process of ripping it out anyways, I'm going to do that and circle back.