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

[mrjonesbot]

Error is thrown on connect and on click action.

[excid3]

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.

[mrjonesbot]

@excid3

[excid3]

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

[mrjonesbot]

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.

[excid3]

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

[excid3]

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

[mrjonesbot]

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.

[excid3]

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

[mrjonesbot]

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.

[mrjonesbot]

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

[mrjonesbot]

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.