[Question] How to integrate Bootstrap 3 scripts?

[Chuvisco88]

Hi there

I'm using Webpack Starter and they have updated to a new structure (DLL). The integration of the Bootstrap scripts, described in the Readme of this repo, does not work any longer.

// inside of webpack.dev.js under the vendor section I added
new DllBundlesPlugin({
    bundles: {
        vendor: [
            // other vendor stuff like 'rxjs',
            'jquery',
            'bootstrap-loader'
        ]
    }
})

// inside of webpack.common.js under module rules I added
module: {
    loaders: [
        // other loaders
        {
            test: /bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
            use: 'imports-loader?jQuery=jquery'
        }
    ]
}

// inside of a component
declare let $: any; // added to the top
// somewhere below in a function
$('#someId').modal({
    backdrop: 'static'
});

This throws $(...).modal is not a function

Any hints regarding the integration of the scripts?

[justin808]

@alexfedoseev has been working with the DLL a bunch.

@Chuvisco88 Looking at the error, it seems that the error is related to not exposing $ for jQuery. Have you tried to globally expose jQuery?

[Chuvisco88]

Hi @justin808

Thanks for the reply. Well, I guess I am already exposing jQuery with the ProvidePlugin

new ProvidePlugin(
  {
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
  }
),

Did you mean this?

[alex35mil]

@Chuvisco88 Yeah, exposing something from DLL build is PITA and I couldn't manage it to work yet. Workaround is to expose it from the non-DLL bundle instead.

I had a thought tho: as DLL build has global name (e.g. vendor), something like this might work, but I haven't tested it yet:

new ProvidePlugin(
  {
    jQuery: 'vendor.jquery',
    $: 'vendor.jquery',
    jquery: 'vendor.jquery'
  }
),

[Chuvisco88]

As far as I can see jQuery itself is imported as I can use $('.someselector') without problems. But it looks definitely like the bootstrap scripts are not loaded so far. Further investigating

[joshcomley]

I have followed the exact same steps at @Chuvisco88 and also using Webpack Starter and I am getting this:

Error: Cannot find module "style-loader!css-loader!resolve-url-loader!sass-loader?sourceMap!./lib\bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"D:\\Code\\Site\\node_modules\\bootstrap-loader\\.bootstraprc-3-default","bootstrapPath":"D:\\Code\\Site\\node_modules\\bootstrap-sass","bootstrapRelPath":"..\\bootstrap-sass"}!./no-op.js"
at webpackMissingModule (http://localhost:3001/vendor.dll.js:95903:87) [<root>]
at Object.<anonymous> (http://localhost:3001/vendor.dll.js:95903:1317) [<root>]
at __webpack_require__ (http://localhost:3001/vendor.dll.js:21:30) [<root>]
at Object.<anonymous> (http://localhost:3001/vendor.dll.js:68779:18) [<root>]
at __webpack_require__ (http://localhost:3001/vendor.dll.js:21:30) [<root>]
at Object.168 (http://localhost:3001/main.bundle.js:226:42) [<root>]
at __webpack_require__ (http://localhost:3001/polyfills.bundle.js:54:30) [<root>]
at Object.67 (http://localhost:3001/main.bundle.js:644:1) [<root>]
at __webpack_require__ (http://localhost:3001/polyfills.bundle.js:54:30) [<root>]
at Object.68 (http://localhost:3001/main.bundle.js:686:73) [<root>]
at __webpack_require__ (http://localhost:3001/polyfills.bundle.js:54:30) [<root>]
at Object.76 (http://localhost:3001/main.bundle.js:1064:70) [<root>]
at __webpack_require__ (http://localhost:3001/polyfills.bundle.js:54:30) [<root>]
at Object.63 (http://localhost:3001/main.bundle.js:511:63) [<root>]
at __webpack_require__ (http://localhost:3001/polyfills.bundle.js:54:30) [<root>]
at Object.306 (http://localhost:3001/main.bundle.js:241:18) [<root>]
at __webpack_require__ (http://localhost:3001/polyfills.bundle.js:54:30) [<root>]
at webpackJsonpCallback (http://localhost:3001/polyfills.bundle.js:25:23) [<root>]
at http://localhost:3001/main.bundle.js:2:1 [<root>]

Does anybody have any thoughts on what I might be doing wrong?

[Chuvisco88]

Not sure but I use the raw-loader for scss, might help in your case :)

{
    test: /\.scss$/,
    use: ['raw-loader', 'sass-loader']
},

[agokrim]

I have the same issue when i use $(".carousel").carousel({ interval: 3000 });

my entry in webpack.config.js entry: { app: [ './src/app.js', ], 'vendor': [ bootstrapConfig, 'font-awesome-loader' ] ...

This throws $(...).carousel is not a function

But when i use this entry it works app: [ './node_modules/bootstrap-sass/assets/javascripts/bootstrap/carousel.js', './src/app.js', ], 'vendor': [ bootstrapConfig, 'font-awesome-loader' ] .. it's seems that bootstrap Plugins are not exposed