bootstrap4-toggle relies on the global presence of jQuery and does not explicitly import it. This can cause issues with build systems that do not produce global variables or allow writing to window by default. Depending on your build system, you may need to make adjustments.
Vite Build System
If you are using Vite, you can install @rollup/plugin-inject:
$ npm i @rollup/plugin-inject -D
Then add the following to your vite.config.js:
import { defineConfig } from 'vite';
import inject from '@rollup/plugin-inject';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
inject({
// remember to add `jquery` in `dependencies` for `package.json`
jQuery: "jquery",
$: "jquery"
})
]
})
With this setup, you won't need to manually import 'jquery' in your scripts anymore. Any reference to jQuery or $ will automatically use the globally injected value.
Note: If a script does not use the injected value, it will not be included. Make sure to utilize it at least once during testing.
Webpack
If you are using webpack, you can use ProvidePlugin in your webpack config like this:
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
JS Modules
In JavaScript Modules, there is no default global window pollution. However, if you want to add jQuery to the window object for standalone scripts, you can do so explicitly like this:
Object.assign(window, { $: jQuery, jQuery })
Further Reading
- How to use a jQuery plugin inside Vue
- How to use jQuery with Laravel and Vite
- How to use Bootstrap 4 and jQuery with Vite v2