In the official Bootstrap 5 documentation, it mentions that we can import pre-compiled js files from bootstrap/js/dist and create a custom bundle using tools like Webpack or rollup.
https://getbootstrap.com/docs/5.0/getting-started/javascript/#individual-or-compiled
The optimizing section of the documentation provides an example of how to import js files. https://getbootstrap.com/docs/5.0/customize/optimize/#lean-javascript
The issue:
I have created a file called bootstrap.js
import 'bootstrap/js/dist/tooltip';
I only want to use the Tooltip plugin.
Below is the configuration I am using for rollup
const plugins = [
babel({
exclude: 'node_modules/**',
// Include the helpers in each file, at most one copy of each
babelHelpers: 'bundled',
presets: [
[
'@babel/preset-env',
{
loose: true,
bugfixes: true,
modules: false
}
]
]
}),
nodeResolve()
]
const bundle = await rollup.rollup({
input: './js/vendors/bootstrap.js',
plugins,
})
await bundle.write({
format: 'umd',
file: './file.js'
})
After generating the file.js and including it in an HTML page, an error appears in the console stating
file.js:1727 Uncaught ReferenceError: process is not definedI am also unable to initialize the Tooltip plugin using Bootstrap syntax
new bootstrap.Tooltip results in an undefined bootstrap error.
To resolve this issue, I have resorted to importing these files from the js/src folder and exporting them as used in js/src/index.umd.js. However, following Bootstrap's official documentation on importing their plugin does not seem to work correctly.