# Webpack 4 and Bootstrap 4 are still not friendly to each other
**URL:** https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251
**Category:** Help Requests
**Created:** [May 27, 2018, 2:31am UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251 "2018-05-27T02:31:15Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@adriatic](https://discourse.aurelia.io/u/adriatic)
#### Post date: [May 27, 2018, 2:31am UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/1 "2018-05-27T02:31:15Z")
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:
```auto
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
2. `webpack.config.js` in the list of `vendor` entries like this
If I change the version number for bootstrap in the `package.json` file to 3.x - the app works fine.
---
### Author:  [@arabsight](https://discourse.aurelia.io/u/arabsight)
#### Post date: [May 27, 2018, 11:40am UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/2 "2018-05-27T11:40:19Z")
bootstrap 4 depends on popper.js, so you need to install it
---
### Author:  [@adriatic](https://discourse.aurelia.io/u/adriatic)
#### Post date: [May 27, 2018, 1:01pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/3 "2018-05-27T13:01:03Z")
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](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
---
### Author:  [@arabsight](https://discourse.aurelia.io/u/arabsight)
#### Post date: [May 27, 2018, 4:35pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/4 "2018-05-27T16:35:52Z")
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.
> **[arabsight/ts-twb4](https://github.com/arabsight/ts-twb4)**
>
> Contribute to arabsight/ts-twb4 development by creating an account on GitHub.
---
### Author:  [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)
#### Post date: [May 28, 2018, 5:55am UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/7 "2018-05-28T05:55:25Z")
Sorry @adriatic, I can’t miss the opportunity - [https://github.com/MaximBalaganskiy/AureliaDotnetTemplate](https://github.com/MaximBalaganskiy/AureliaDotnetTemplate)
😄
---
### Author:  [@adriatic](https://discourse.aurelia.io/u/adriatic)
#### Post date: [May 28, 2018, 1:59pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/8 "2018-05-28T13:59:18Z")
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?
---
### Author:  [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)
#### Post date: [May 28, 2018, 9:42pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/9 "2018-05-28T21:42:29Z")
Grab the WP configuration from there and update yours
---
### Author:  [@mp24](https://discourse.aurelia.io/u/mp24)
#### Post date: [May 29, 2018, 7:21am UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/10 "2018-05-29T07:21:16Z")
@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`:
```auto
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
```auto
```
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)
```auto
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()
]
```
---
### Author:  [@adriatic](https://discourse.aurelia.io/u/adriatic)
#### Post date: [May 29, 2018, 3:19pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/11 "2018-05-29T15:19:39Z")
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](https://github.com/FEC-samples-collection/NS-CLI-TS-webpack/blob/master/webpack.config.js)**.
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:
If I change the **[Bootstrap definition](https://github.com/FEC-samples-collection/NS-CLI-TS-webpack/blob/master/package.json#L16)** 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](https://github.com/FEC-samples-collection/NS-CLI-TS-webpack/blob/master/src/nav-bar.html)**). The most likely reason for this problem is that some of the css clssses in the nav-bar.html definition
```auto
```
should be changed for Bootstrap 4
---
### Author:  [@mp24](https://discourse.aurelia.io/u/mp24)
#### Post date: [May 29, 2018, 3:44pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/12 "2018-05-29T15:44:16Z")
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.
---
### Author:  [@adriatic](https://discourse.aurelia.io/u/adriatic)
#### Post date: [May 29, 2018, 3:52pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/13 "2018-05-29T15:52:20Z")
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](https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-webpack/webpack.config.js)** and **[this navbar.html](https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-webpack/src/nav-bar.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.
---
### Author:  [@adriatic](https://discourse.aurelia.io/u/adriatic)
#### Post date: [May 29, 2018, 5:35pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/14 "2018-05-29T17:35:26Z")
Problem solved - thanks to the work on **[skeleton-typescript-webpack](https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-webpack)** which is BS4 based. I summarized the steps needed to make the CLI generated webpack skeleton navigation _ **clone** _ in this **[document](https://github.com/FEC-samples-collection/NS-CLI-TS-webpack/issues/3#issue-327398362)** and the finished NS-CLI-TS-webpack is **[here](https://github.com/FEC-samples-collection/NS-CLI-TS-webpack)**.
Note: this sample application (and many more to follow) is a part of the **[FrontEnd Creator](http://frontendcreator.com/)** application environment.
---
### Author:  [@marcandre.roy](https://discourse.aurelia.io/u/marcandre.roy)
#### Post date: [May 30, 2018, 3:06pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/15 "2018-05-30T15:06:13Z")
Glad the fact I upgraded the skeleton help someone 🙂
---
### Author:  [@adriatic](https://discourse.aurelia.io/u/adriatic)
#### Post date: [May 30, 2018, 3:33pm UTC](https://discourse.aurelia.io/t/webpack-4-and-bootstrap-4-are-still-not-friendly-to-each-other/1251/16 "2018-05-30T15:33:16Z")
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.