Bootstrap 4 beta 1 support #315

Ks89 · 2017-08-11T11:07:04Z

Hi!
I updated to [email protected] 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

The text was updated successfully, but these errors were encountered:

Ks89 · 2017-08-11T11:08:10Z

Be careful, because tons of variables were renamed:

twbs/bootstrap#22414

twbs/bootstrap#22092

mbenzenhoefer · 2017-08-11T11:34:42Z

_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.

Ks89 · 2017-08-11T12:19:38Z

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

mbenzenhoefer · 2017-08-11T12:21:01Z

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

Ks89 · 2017-08-11T12:25:28Z

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

jhariani · 2017-08-11T12:44:26Z

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

djnaumov · 2017-08-11T13:24:25Z

And
3. Add package Popper.js

mbenzenhoefer · 2017-08-11T13:28:16Z

@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.

Ks89 · 2017-08-11T13:47:53Z

Thank u guys, now It's working :)

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

justin808 · 2017-08-13T07:51:26Z

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

Ks89 · 2017-08-14T11:34:02Z

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

Ks89 · 2017-08-14T11:37:45Z

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

jugg1es · 2017-08-14T18:58:38Z

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

justin808 · 2017-08-14T20:16:23Z

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.

justin808 · 2017-08-14T20:17:30Z

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

Ks89 · 2017-08-16T09:09:30Z

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

jugg1es · 2017-08-16T13:19:24Z

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.

Ks89 · 2017-08-17T11:49:37Z

@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".

Ks89 · 2017-08-17T11:52:13Z

@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

justin808 · 2017-08-18T07:37:24Z

Merged! and released 2.2.0! See #316.

eskinderg · 2017-09-12T14:28:28Z

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.

Glavin001 · 2018-02-09T22:01:32Z

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! 😃

See shakacode/bootstrap-loader#315 (comment)

Nekoframe · 2018-05-09T15:53:45Z

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

aericson mentioned this issue Aug 11, 2017

Update to Bootstrap 4 beta vintasoftware/django-react-boilerplate#125

Closed

ciki6 mentioned this issue Aug 17, 2017

there is no bootstrap/scss/_normalize.scss in bootstrap ,why i need to import it ? #319

Closed

justin808 closed this as completed Aug 18, 2017

Glavin001 added a commit to Unibeautify/assistant that referenced this issue Feb 9, 2018

Fix broken build, improve styling, remove docs/

d13395a

See shakacode/bootstrap-loader#315 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap 4 beta 1 support #315

Bootstrap 4 beta 1 support #315

Ks89 commented Aug 11, 2017

Ks89 commented Aug 11, 2017 •

edited

Loading

mbenzenhoefer commented Aug 11, 2017 •

edited

Loading

Ks89 commented Aug 11, 2017

mbenzenhoefer commented Aug 11, 2017

Ks89 commented Aug 11, 2017

jhariani commented Aug 11, 2017

djnaumov commented Aug 11, 2017 •

edited

Loading

mbenzenhoefer commented Aug 11, 2017

Ks89 commented Aug 11, 2017

justin808 commented Aug 13, 2017

Ks89 commented Aug 14, 2017

Ks89 commented Aug 14, 2017 •

edited

Loading

jugg1es commented Aug 14, 2017

justin808 commented Aug 14, 2017

justin808 commented Aug 14, 2017

Ks89 commented Aug 16, 2017

jugg1es commented Aug 16, 2017

Ks89 commented Aug 17, 2017

Ks89 commented Aug 17, 2017

justin808 commented Aug 18, 2017

eskinderg commented Sep 12, 2017 •

edited

Loading

Glavin001 commented Feb 9, 2018

Nekoframe commented May 9, 2018

Bootstrap 4 beta 1 support #315

Bootstrap 4 beta 1 support #315

Comments

Ks89 commented Aug 11, 2017

Ks89 commented Aug 11, 2017 • edited Loading

mbenzenhoefer commented Aug 11, 2017 • edited Loading

Ks89 commented Aug 11, 2017

mbenzenhoefer commented Aug 11, 2017

Ks89 commented Aug 11, 2017

jhariani commented Aug 11, 2017

djnaumov commented Aug 11, 2017 • edited Loading

mbenzenhoefer commented Aug 11, 2017

Ks89 commented Aug 11, 2017

justin808 commented Aug 13, 2017

Ks89 commented Aug 14, 2017

Ks89 commented Aug 14, 2017 • edited Loading

jugg1es commented Aug 14, 2017

justin808 commented Aug 14, 2017

justin808 commented Aug 14, 2017

Ks89 commented Aug 16, 2017

jugg1es commented Aug 16, 2017

Ks89 commented Aug 17, 2017

Ks89 commented Aug 17, 2017

justin808 commented Aug 18, 2017

eskinderg commented Sep 12, 2017 • edited Loading

Glavin001 commented Feb 9, 2018

Nekoframe commented May 9, 2018

Ks89 commented Aug 11, 2017 •

edited

Loading

mbenzenhoefer commented Aug 11, 2017 •

edited

Loading

djnaumov commented Aug 11, 2017 •

edited

Loading

Ks89 commented Aug 14, 2017 •

edited

Loading

eskinderg commented Sep 12, 2017 •

edited

Loading