Missing exports

[danports]

Error Description

On 5.3.0, I was able to import this library with import 'bootstrap5-toggle/js/bootstrap5-toggle.ecmas.js' in a JavaScript module, and @import 'bootstrap5-toggle/css/bootstrap5-toggle.css' in a Sass file. Those imports no longer function on 5.3.1+ due to the exports defined in the package.json, which block the import of any entry points not defined there:

Missing "./js/bootstrap5-toggle.ecmas.js" specifier in "bootstrap5-toggle" package`

I can change the JavaScript module import to import 'bootstrap5-toggle' but I can't see how to import the CSS.

Steps to Reproduce

See above.

Expected Behavior

See above.

Actual Behavior

See above.

Severity

Severe

Bootstrap 5 Toggle Version

5.3.3

Bootstrap version

5.3.8

Other

No response

Bug Report Checklist

• Confirm that you agree to follow the project's code of conduct.
• Confirm that you have reviewed open and rejected anomalies and have not found the reported anomaly.

[github-actions]

Hi! 👋
Thanks for your issue. You are helping to improve Bootstrap 5 toggle.

[palcarazm]

Hi, the issue will be fixed in 5.4.0, please remain in 5.2.x since 5.4.0 is released.

Thanks to @xianzuyang9-blip for the fix!

[palcarazm]

Hi @danports,
I've release v5.4.0 including the fix for this issue.

[danports]

On 5.4.0, I'm seeing TypeError: this.$refs.toggle.bootstrapToggle is not a function with a Vue element like <input ref="toggle" data-toggle="toggle">. Has something changed in how the library adds the bootstrapToggle function?

[palcarazm]

Hi,

If you import from bootstrap5-toggle/js/bootstrap5-toggle.ecmas.js or bootstrap5-toggle/js/bootstrap5-toggle.jquery.js there are no changes.

But if you import bootstrap5-toggle only the Toogle class and types are exposes. Without initializing DOM.

[danports]

We're importing the whole file but that isn't working:

import 'bootstrap5-toggle/js/bootstrap5-toggle.ecmas.js';

[palcarazm]

It looks like Vue is mounting the component before the library has registered the bootstrapToggle function on HTMLInputElement.prototype. In that situation, Vue receives a plain HTMLElement whose prototype does not yet include bootstrapToggle, which results in:

TypeError: this.$refs.toggle.bootstrapToggle is not a function

This usually happens when the bundler isolates module scopes or tree‑shakes the IIFE that extends the DOM prototype, so the global patch never runs early enough.

As a workaround, you can bypass the prototype extension and instantiate the toggle directly:

import { BootstrapToggle } from 'bootstrap5-toggle';

const _toggle = new BootstrapToggle(this.$refs.toggle);

This avoids relying on the prototype patch and ensures the toggle is created correctly regardless of execution order.

I've to add a Vue component in the roadmap!

[palcarazm]

If you are using TypeScript, note that Vue types this.$refs.toggle as a plain HTMLElement by default. Since the library now ships TypeScript definitions, the compiler will not allow calling bootstrapToggle on an element that is not explicitly typed as an HTMLInputElement.

Even if the prototype patch is applied correctly at runtime, TypeScript will still report:

Property 'bootstrapToggle' does not exist on type 'HTMLElement'

To fix this, you may need to cast the ref:

(this.$refs.toggle as HTMLInputElement).bootstrapToggle();

[danports]

In the past (5.3.0), the DOM prototype was patched as a side effect of the import - does that no longer happen in 5.3.1+? This is a runtime error, not a compiler error, so I don't think the TS cast would help.