Webpack 4 and Bootstrap 4 are still not friendly to each other

Help Requests
1

The last discussion on this subject is some 3 months old, so I was hoping that by now, creating a CLI generated Typescript-Webpack 4 application that uses Bootstrap would be a breeze. However after spending a couple of hours trying to get it to work, I realized that it might be smarter to ask whether this error message:

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'C:\work\FEC-samples\FEC-test-sample\node_modules\bootstrap\dist\js'  @ ./node_modules/bootstrap/dist/js/bootstrap.js 7:101-121
 @ multi (webpack)-dev-server/client?http://localhost:8080 bluebird jquery bootstrap

means something to folks that got this to work.

There are two places where bootstrap appears in project configuration files (note that aurelia.json file has no dependencies information when using the webpack as the loader/bundler).

  1. package.json in the list of dependencies, like

    "dependencies": {
   ...
   "bootstrap": "^4.1.1",
   "font-awesome": "^4.7.0",
    ...
 },

  2. webpack.config.js in the list of vendor entries like this

        entry: {
        app: ['aurelia-bootstrapper'],
        vendor: [
           'bluebird',
           'jquery',
           'bootstrap'
         ],
      },

If I change the version number for bootstrap in the package.json file to 3.x - the app works fine.

2

bootstrap 4 depends on popper.js, so you need to install it

3

I am not sure about the need to install popper.js I did try that and got a ton of runtime error messages. I also found several explanations that popper.js is bundled with bootstrap since its release, so it does not need to be installed separately.

The article https://stevenwestmoreland.com/2018/01/how-to-include-bootstrap-in-your-project-with-webpack.html comes close to what I need - but it is not aurelia specific it is incomplete for my need

4

popper.js and jquery are included in bootstrap.bundle.js which is not the file used when you import ‘bootstrap’, so unless you’re using an alias for ‘bootstrap’ to point to that file, you need to install both jquery and popper.js.

7

Sorry @adriatic, I can’t miss the opportunity - https://github.com/MaximBalaganskiy/AureliaDotnetTemplate

:smile:

8

Hi, Max

My turn to say sorry - but for different reason: I fail to see the connection between my preference for a different way to generate the Aurelia Dotnet distributed app and the problem I am having with Webpack 4 - Bootstrap 4 configuration. Would you mind to explain?

9

Grab the WP configuration from there and update yours

10

@adriatic Would you also be able to show where you import bootstrap?

I had success with BS4 and Webpack 4 with the following imports in app.ts:

import * as $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

I don’t need to import popper.js, though I must install it of course. You may save installing it if you import bootstrap/dist/js/bootstrap.bundle

In app.html, I do a

<require from="bootstrap/dist/css/bootstrap.min.css"></require>

In Webpack, I use code splitting which is offered by setting a second parameter in all calls to PLATFORM.moduleName('path/to/view', 'bundlename') and then a simple entry, optimization parameters (loaders not shown)

entry: ['es6-promise/auto', 'whatwg-fetch', 'aurelia-bootstrapper'],
optimization: {
        splitChunks: {
            name: 'common',
            chunks: 'async',
            minChunks: 2
        }
    },
plugins: [
        new CleanWebpackPlugin(['dist/*.*']),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'jquery': 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
            'window.Tether': 'tether',
            'Tether': 'tether'
        })
        , new AureliaPlugin()
    ]
11

Thank you @MaximBalaganskiy and @mp24 for trying to help me. Your solutions are too far away from what I am trying to achieve: make Aurelia CLI created app to use Bootstrap 4 and Webpack 4. The term “Aurelia CLI created app” means that I want to use the webpack.config.js that is created by the CLI tool - like this one.

Once I realized that most of my problems were caused by using popper, instead of the required popper.js (Duh), my current situation is best defined by this screenshot:

image
image.png887×474 77.6 KB

If I change the Bootstrap definition to version 3.3.7 the app works fine.

Feeling lazy, I made this post expecting some idea to quickly fix this (instead of debugging the ‘view-only’ nav-bar.html). The most likely reason for this problem is that some of the css clssses in the nav-bar.html definition

      <ul class="nav navbar-nav">
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
          </li>
        </ul>

should be changed for Bootstrap 4

12

There are breaking changes between Bootstrap 3.3.7 and 4.*, and navbar is one of the main ones. Unfortunately, BS4 is not a drop-in replacement. You would need to adapt your HTML code.

13

Thanks, @mp24 - I agree with your conclusion and have found a better way to address this (better than replacing the parts of nav-bar without really knowing what to replace and what the replacement should be).

I am looking at this webpack.config.js and this navbar.html - as this Navigation Skeleton sample is very close to what I am doing (CLI based clone of that app).

I will publish the results of this “manual diff” here to save other folks the trouble of doing pedestrian tasks.

Thanks again for responding.

14

Problem solved - thanks to the work on skeleton-typescript-webpack which is BS4 based. I summarized the steps needed to make the CLI generated webpack skeleton navigation clone in this document and the finished NS-CLI-TS-webpack is here.

Note: this sample application (and many more to follow) is a part of the FrontEnd Creator application environment.

1 Like
15

Glad the fact I upgraded the skeleton help someone :slight_smile:

16

It did not help just me as the “CLI Skeleton clones” that I am gradually publishing will help all the folks who

  • prefer to use CLI / Webpack tooling for building their apps
  • appreciate to start “above” the level of functionality of the current CLI generated “Hello world” app.
1 Like