Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.05k stars 597 forks source link

"TypeError: A is undefined" when using with importmaps + Stimulus.js #1141

Closed janpeterka closed 4 months ago

janpeterka commented 4 months ago

Describe the bug Choices.js doesn't work for me at all, getting TypeError: A is undefined error.

I'm trying to use Choices.js for the first time, so possibly I'm missing something simple here.

Having Rails 7.1 app, this is how I tried to use Choices:

  1. Added javascript using importmaps:
    
    # config/importmap.rb

pin "choices" # @0.1.3 pin "colors" # @0.6.2 pin "process" # @2.0.1


2. Created Stimulus controller:
```js
import { Controller } from "@hotwired/stimulus"
import Choices from "choices"

export default class extends Controller {

    connect() {
        const element = document.querySelector('.selectize');
        const choices = new Choices(element)
    }
}
  1. Linked controller to my select field:
    = form.association :assignees, multiple: true, label: false, collection: task_group.group.members, col_span: :full, input_html: {class: "selectize", data: {controller: "select"}}

(Later i tried on simple select element, getting same result)

  1. Got an error: Screenshot from 2024-02-08 11-02-02

Desktop (please complete the following information):

janpeterka commented 4 months ago

Right after I posted this, I noticed that pinned version is weird, and I'm using wrong package the whole time :facepalm: