Having trouble integrating the JQuery plugin bootstrap-toggle into my Webpacked Typescript project. Every time I try to call it, I encounter an error stating is not a function and find that the handle is undefined.
I realized webpack was not including the module, so I added an import for it at the top.
import * as $ from 'jquery';
import 'bootstrap-toggle';
$("#test-toggle").bootstrapToggle();
HTML:
<label>
<input id="test-toggle" name="testtoggle" data-toggle="toggle" type="checkbox">
Test Toggle
</label>
Webpack config:
const path = require('path');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: './app.ts',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
}
};
Webpack output:
[webpack-cli] Compilation finished
asset bundle.js 199 KiB [emitted] [minimized] (name: main) 1 related asset
modules by path ../node_modules/ 532 KiB
modules by path ../node_modules/bootstrap/ 73.6 KiB 13 modules
../node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
../node_modules/bootstrap-toggle/js/bootstrap-toggle.js 5.41 KiB [built] [code generated]
modules by path ./ 632 b
modules by path ./*.ts 632 b
./app.ts 632 bytes [built] [code generated]
webpack 5.4.0 compiled successfully in 5743 ms
The versions I'm using:
"@types/bootstrap": "^5.0.0",
"@types/bootstrap-toggle": "^2.2.1",
"@types/jquery": "^3.5.4",
"bootstrap": "^3.4.1",
"bootstrap-toggle": "^2.2.2",
"jquery": "^3.5.1",
"ts-loader": "^8.0.11",
"typescript": "^4.0.5",
"webpack": "^5.4.0"