Bootstrap 4 beta 1 support

Question

Bootstrap 4 beta 1 support

Ks89 opened this issue 7 years ago · comments

Hi!
I updated to bootstrap@4.0.0-beta and now I've this error:

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","normalize","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","responsive-embed","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js
Module build failed:
undefined
^
      File to import not found or unreadable: ../bootstrap/scss/_normalize.
Parent style sheet: stdin
      in /Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap-loader/no-op.js (line 4, column 1)
 @ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","normalize","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","responsive-embed","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js 4:14-1092 18:2-22:4 19:20-1098
 @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
 @ ./node_modules/bootstrap-loader/loader.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts

Beta 1 dropped Normalize.css as a dependency

Stefano Cappa · Answer 1 · Fri Aug 11 2017 19:08:10 GMT+0800 (China Standard Time)

Be careful, because tons of variables were renamed:

twbs/bootstrap#22414

twbs/bootstrap#22092

Moritz Benzenhöfer · Answer 2 · Fri Aug 11 2017 19:34:42 GMT+0800 (China Standard Time)

_normalize is not contained any more in bootstrap 4 beta. You need to remove this from your .bootstraprc.

Just take a look at the recent blog entry: http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/

Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot. Normalize.css has taken a different path than we’d prefer, dropping some core CSS tweaks we’ve long depended upon. Reboot takes the core of Normalize.css and expands it to include more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.

Stefano Cappa · Answer 3 · Fri Aug 11 2017 20:19:38 GMT+0800 (China Standard Time)

I removed responsive-embed and normalize from .bootstraprc and now I have this error:

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js
Module build failed:
$link-hover-color:      darken($link-color, 15%) !default;
                       ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
	node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
	node_modules/bootstrap/scss/_variables.scss:168
      in /Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
 @ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js 4:14-1057 18:2-22:4 19:20-1063
 @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
 @ ./node_modules/bootstrap-loader/loader.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts

Moritz Benzenhöfer · Answer 4 · Fri Aug 11 2017 20:21:01 GMT+0800 (China Standard Time)

adding this to the custom variables file fixed the issue for me:
@import "~bootstrap/scss/_functions.scss";

Stefano Cappa · Answer 5 · Fri Aug 11 2017 20:25:28 GMT+0800 (China Standard Time)

which "custom variables file"? A scss file inside your project, or _variables.scss inside bootstrap?

Jay Hariani · Answer 6 · Fri Aug 11 2017 20:44:26 GMT+0800 (China Standard Time)

I was able to get 4 beta to work with the following:

Set normalize: false and responsive-embed: false in my .bootstraprc
Add @import "~bootstrap/scss/_functions.scss" to the top of my pre-customizations.scss file

Vladimir Naumov · Answer 7 · Fri Aug 11 2017 21:24:25 GMT+0800 (China Standard Time)

And
3. Add package Popper.js

Moritz Benzenhöfer · Answer 8 · Fri Aug 11 2017 21:28:16 GMT+0800 (China Standard Time)

@Ks89 @jhariani: Yes just add this file to any included scss file before the failing code part (either in your custom variables file or in the pre-customizations file.

Stefano Cappa · Answer 9 · Fri Aug 11 2017 21:47:53 GMT+0800 (China Standard Time)

Thank u guys, now It's working :)

I added . 'Popper': 'popper.js' into "ProvidePlugin({...})" in my webpack config.

Justin Gordon · Answer 10 · Sun Aug 13 2017 15:51:26 GMT+0800 (China Standard Time)

I'm going to merge #125 soon. However, is there a good reason to support both the alpha and the beta with the update?

Stefano Cappa · Answer 11 · Mon Aug 14 2017 19:34:02 GMT+0800 (China Standard Time)

@justin808 I think that alphas should be removed. Now apis should be stable, so all previous alphas are useless.

Stefano Cappa · Answer 12 · Mon Aug 14 2017 19:37:45 GMT+0800 (China Standard Time)

Attention: to prevent this error

zone.js:195 Uncaught TypeError: Popper is not a constructor
    at Dropdown.toggle (dropdown.js:145)
    at HTMLButtonElement.<anonymous> (dropdown.js:270)
    at Function.each (jquery.js:362)
    at jQuery.fn.init.each (jquery.js:157)
    at jQuery.fn.init._jQueryInterface [as dropdown] (dropdown.js:257)
    at HTMLButtonElement.<anonymous> (dropdown.js:411)
    at HTMLDocument.dispatch (jquery.js:5206)
    at HTMLDocument.elemData.handle (jquery.js:5014)
    at ZoneDelegate.webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at ZoneTask.webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1370)
    at HTMLDocument.globalZoneAwareCallback (zone.js:1388)
toggle @ dropdown.js:145
(anonymous) @ dropdown.js:270
each @ jquery.js:362
each @ jquery.js:157
_jQueryInterface @ dropdown.js:257
(anonymous) @ dropdown.js:411
dispatch @ jquery.js:5206
elemData.handle @ jquery.js:5014
webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388

while using Popper with Webpack 3, import Popper in this way:

ProvidePlugin({
  ...,
  Popper: ['popper.js', 'default'],
  ...
})

not simply with 'Popper': 'popper.js'

I hope that this could be useful for some people

Peter Roca · Answer 13 · Tue Aug 15 2017 02:58:38 GMT+0800 (China Standard Time)

None of this worked for me: setting normalize and responsive_embed to false, importing the functions.scss file and installing popper (and adding to webpack).

I'm using webpack 2 though

Justin Gordon · Answer 14 · Tue Aug 15 2017 04:16:23 GMT+0800 (China Standard Time)

See: #316.

This is almost ready to go. I commented:

@ivankalinin Great work!

1. Let's remove all the beta parts. Alpha users should not upgrade.
2. Please update the CHANGELOG.md per prior entries for v2.2.0 and make any necessary changes in the README.md
3. Please confirm that you've tried all the examples in the examples directory and you've made the appropriate updates there so they are all on the beta and not the alpha.

Once the above 3 steps are done, I'll immediately create a new release for v2.2.0.

Justin Gordon · Answer 15 · Tue Aug 15 2017 04:17:30 GMT+0800 (China Standard Time)

@jugg1es @Ks89 feel free to try to help @IvanKalinin getting this to the finish line.

Stefano Cappa · Answer 16 · Wed Aug 16 2017 17:09:30 GMT+0800 (China Standard Time)

@jugg1es what does it mean "None of this worked for me". Could you share your log?

Peter Roca · Answer 17 · Wed Aug 16 2017 21:19:24 GMT+0800 (China Standard Time)

After attempting all of the steps suggested, I was still getting:

Argument $colorofdarken($color, $amount) must be a color

I don't have the full log because I just set bootstrap to be fixed at

"bootstrap": "4.0.0-alpha.6",

and moved on for now.

Stefano Cappa · Answer 18 · Thu Aug 17 2017 19:49:37 GMT+0800 (China Standard Time)

@jugg1es I think you should check if in your .bootstraprc "preBootstrapCustomizations:" is uncommented, and inside the precustomizations file, at the beginning, you have this @import "~bootstrap/scss/_functions.scss".

Stefano Cappa · Answer 19 · Thu Aug 17 2017 19:52:13 GMT+0800 (China Standard Time)

@jugg1es I created two templates with bootstrap-loader and bootstrap 4 beta. If you want you could check for differences.
Webpack 3: https://github.com/Ks89/angular-webpack-skeleton
angular-cli: https://github.com/Ks89/angular-cli-bootstraploader

Justin Gordon · Answer 20 · Fri Aug 18 2017 15:37:24 GMT+0800 (China Standard Time)

Merged! and released 2.2.0! See #316.

Eskinder · Answer 21 · Tue Sep 12 2017 22:28:28 GMT+0800 (China Standard Time)

I had the same issue with my angular-cli app. Using a diffrent version of node and npm fixed my issue. If it helps, try using NVM to switch to different versions of node.

Glavin Wiechert · Answer 22 · Sat Feb 10 2018 06:01:32 GMT+0800 (China Standard Time)

Same issue here:

ERROR in ./~/css-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","print","buttons","code","forms","grid","images","reboot","tables","type","alert","badge","breadcrumb","button-group","card","close","custom-forms","dropdown","input-group","jumbotron","list-group","media","nav","navbar","pagination","progress","responsive-embed","transitions","carousel","modal","popover","tooltip","utilities"],"scripts":false,"configFilePath":"/Users/glavin/Development/unibeautify/assistant/.bootstraprc","bootstrapPath":"/Users/glavin/Development/unibeautify/assistant/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/source-map-loader!./~/source-map-loader!./~/bootstrap-loader/no-op.js
Module build failed:
undefined
^
      File to import not found or unreadable: ../bootstrap/scss/_responsive-embed.
Parent style sheet: stdin
      in /Users/glavin/Development/unibeautify/assistant/node_modules/bootstrap-loader/no-op.js (line 29, column 1)
 @ ./~/style-loader!./~/css-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","print","buttons","code","forms","grid","images","reboot","tables","type","alert","badge","breadcrumb","button-group","card","close","custom-forms","dropdown","input-group","jumbotron","list-group","media","nav","navbar","pagination","progress","responsive-embed","transitions","carousel","modal","popover","tooltip","utilities"],"scripts":false,"configFilePath":"/Users/glavin/Development/unibeautify/assistant/.bootstraprc","bootstrapPath":"/Users/glavin/Development/unibeautify/assistant/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/source-map-loader!./~/bootstrap-loader/no-op.js 4:14-989 18:2-22:4 19:20-995
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ multi react-hot-loader/patch bootstrap-loader ./src/index.tsx

I do not understand if there was a solution described here.

Here is what worked for me:

diff --git a/.bootstraprc b/.bootstraprc
index f942e78..180eb6e 100644
--- a/.bootstraprc
+++ b/.bootstraprc
@@ -34,7 +34,6 @@ styles:
   mixins: true

   # Reset and dependencies
-  normalize: true
   print: true

   # Core CSS
@@ -64,7 +63,6 @@ styles:
   navbar: true
   pagination: true
   progress: true
-  responsive-embed: true
   transitions: true

   # Components w/ JavaScript
diff --git a/package.json b/package.json
index b63bb6b..5935882 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
     "@types/react-router-dom": "^4.0.4",
     "@types/webpack-env": "^1.13.0",
     "awesome-typescript-loader": "^3.1.3",
-    "bootstrap": "^4.0.0-alpha.6",
-    "bootstrap-loader": "^2.1.0",
+    "bootstrap": "^4.0.0",
+    "bootstrap-loader": "^2.2.0",
     "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.28.4",
     "exports-loader": "^0.6.4",

Hope that helps someone else! 😃

Thanawan Pinlaem · Answer 23 · Wed May 09 2018 23:53:45 GMT+0800 (China Standard Time)

@mbenzenhoefer It works for me now, thank you very much.
I spent half a day trying to fix that issue :(