Choices-js / Choices

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

Can't import Choices after upgrading to v11.x; version 10.x works. #1227

Closed christiannelson closed 3 weeks ago

christiannelson commented 3 weeks ago

Describe the bug

Switching from v10.2.0 to v11.0.2, I'm now unable to import Choices. Note: everything, including Choices, works correctly with v10.2.0.

The error with v11.0.2 is: SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.

When I use https://arethetypeswrong.github.io/?p=choices.js%4011.0.2 to see what might be wrong, the results are not encouraging. Note, https://arethetypeswrong.github.io/?p=choices.js%4010.2.0 produces a clean report.

I can't quite tell what's wrong, but it looks like v11 isn't exporting in a way that the browser can understand. Or (more likely?), how I'm importing the library isn't supported with v11; perhaps there's something unusual about Rails' importmaps?

Thanks! If I can test anything, please let me know and I'll happily report back.

More context: I'm working in a Rails App that's using importmaps, the related code snippets are (for reference):

# config/importmap.rb

# Neither of these work...
# pin "choices.js", to: "https://ga.jspm.io/npm:choices.js@11.0.2/public/assets/scripts/choices.js"
pin "choices.js", to: "https://cdn.jsdelivr.net/npm/choices.js@11.0.2/public/assets/scripts/choices.js"
# ...
# select_item_controller.js

import {Controller} from "@hotwired/stimulus"
import {post} from "@rails/request.js";
import Choices from "choices.js";

export default class extends Controller {
    connect() {
        const selectElement = this.element.querySelector("select");

        this.choices = new Choices(selectElement, { allowHTML: true });
    }

    // ...
}  

To Reproduce See above.

Expected behavior import Choices from "choices.js"; imports the Choices code without error.

Screenshots If applicable, add screenshots to help explain your problem.

Choices version and bundle

Desktop (please complete the following information):

christiannelson commented 3 weeks ago

Sometimes you just have to write out a bug report before figuring out the issue.

Importing the .mjs variant fixes the issue.

# config/importmap.rb

pin "choices.js", to: "https://cdn.jsdelivr.net/npm/choices.js@11.0.2/public/assets/scripts/choices.mjs"
christiannelson commented 3 weeks ago

Going to close this since I figured out the issue.