Webpack 4 is tree shaking away bootstrap, how can I prevent that?

Question

I am trying to get a legacy app that uses the Jquery modal plugin which requires bootstrap's javascript to work within an Angular 6 and Webpack 4 project that uses a custom Webpack configuration. Everything is working except that the tree shaking that takes place during bundling is removing the bootstrap imports that are in my vendor.ts file because no where in my app do I explicitly use the bootstrap import.

This then causes my bootstrap modals and bootstrap dropdowns to break.

Note: if I add something like:

import * as bootstrap from "bootstrap";
console.log(bootstrap);

to my main.ts file, webpack doesn't remove bootstrap and everything works fine.

I have already tried adding multiple entries to my package.json sideEffects property that has been suggested in the documentation but I am thinking that this property is used to mark code that should be removed. Is there a way to mark imported modules as not to be removed from the tree shaking process?

I have also tried the ProvidePlugin like so:

new ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    _: "underscore",
    bootstrap: "bootstrap",
    moment: "moment",
    momenttimezone: "moment-timezone",
    // Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    // Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
})

Thanks for your time.

Answer 1

I had the same problem and solution was following:

instead of using "import", use "require".

Change this

import * as bootstrap from "bootstrap";

to this

require("bootstrap");

Unfortunately, I have not figured out, how to make it work with the "import".