Incompatibility with bootstrap > 4.1 #1351

christian-graf · 2019-02-15T12:43:58Z

Test Case

Sorry but I can provide a codepen test case because it seemed to be an compatibility issue.
I am unable to compile my stack via webpack, so I don't have a example.

Summary

I made a simple npm upgrade of my packages.
After the update I got the following error while running my webpack configuration.

ERROR in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/sass-loader/lib/loader.js??ref--5-4!./resources/assets/sass/app.scss
Module build failed:
undefined
            ^
      Mixin form-validation-state is missing argument $icon.
 (line 159, column 14)
 @ ./resources/assets/sass/app.scss 4:14-206
 @ multi ./resources/assets/js/bootstrap.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed:
undefined
            ^
      Mixin form-validation-state is missing argument $icon.
      in E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\bootstrap-material-design\scss\mixins\_forms.scss (line 159, column 14)
    at runLoaders (E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\webpack\lib\NormalModule.js:195:19)
    at E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\sass-loader\lib\loader.js:55:13)
    at Object.done [as callback] (E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\neo-async\async.js:8077:18)
    at options.error (E:\Workspace\Datamedrix\Projects\Roche\DRA-Tool\node_modules\node-sass\lib\index.js:294:32)
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/bootstrap.js ./resources/assets/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js`

The essential line is this one
Mixin form-validation-state is missing argument $icon.*

Additional Information

After I have looking for changes I tried to rollback the version of bootstrap version from 4.3.1 back to 4.2.1. Now all is working well!

Is there an known issue?

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

christian-graf · 2019-02-15T12:45:06Z

more additional information

My package config:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "dependencies": {
        "axios": "^0.18",
        "bootbox": "^4.4.0",
        "bootstrap": "~4.2.1",
        "bootstrap-material-design": "^4.1.1",
        "cross-env": "^5.1",
        "devextreme": "^18.1.4",
        "devextreme-intl": "^18.1.5",
        "devextreme-vue": "^18.1.4-alpha.6",
        "devour-client": "^2.0.13",
        "jquery": "^3.2",
        "js-md5": "^0.7.3",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "moment": "^2.22.2",
        "popper.js": "^1.12",
        "vue": "^2.5.7",
        "vue-loader": "^12.2.2",
        "webpack-livereload-plugin": "^1.0.0"
    }
}

FezVrasta · 2019-02-15T16:40:17Z

Thanks for the report.

Honestly I would have expected Bootstrap to follow semver and don't break stuff within same compatible range...

I will need to investigate this. Thanks.

christian-graf · 2019-02-18T11:28:06Z

@FezVrasta Thanks for the fast response.

Yes I had the same prediction that bootstrap has made some breaking changes in it :(

If you need someone for testing or something like that, let me know :)

ndesorden · 2019-03-11T08:07:37Z

With 4.2.1 still works

The breaking change:
twbs/bootstrap@deea117#diff-4fcf7dc3cf66b28cb08274cc30798d70

Thanks to @fooey:
creativetimofficial/material-kit#154 (comment)

aleksander-tatskiy · 2019-03-21T15:35:48Z

Yes, for 4.2.1 it works, but not for 4.3.1
Please, try to provide for the latest version of twbs

Thanks

dvdknaap · 2019-03-22T12:58:53Z

I've got the same issue i can confirm that @fooey his fix works

node_modules/bootstrap-material-design/scss/mixins/_forms.scss line 159
Change the following line
@include form-validation-state("valid", $label-color);
to
@include form-validation-state("valid", $label-color, "none");

CKGrafico · 2019-05-22T13:35:51Z

Still the same...

FezVrasta · 2019-05-22T13:56:58Z

I just published 4.1.2 that should fix this issue, please report the issue here if it still happens.

ghost · 2019-05-23T12:08:26Z

After you made this change, it made it incompatible with 4.2.1. It's too late now, but maybe next time, use a higher release number (i.e. 4.2.0) instead? We had bmd version set to ^4.1.1 and bootstrap to 4.2.1, which made it suddenly not work. I'm not that sharp on node and the package syntax/functionality, but I think ^4.1.1 means "compatible with 4.1.1", right?

Hope you understand what I mean.

And also, thanks for maintaining <3

FezVrasta · 2019-05-23T12:27:41Z

Honestly the whole situation is very confusing, Bootstrap introduced a breaking change into a minor/patch version, which is against SemVer... After that, we patched our code to make it compatible with Bootstrap again, and made that in a patch version as well since that's what Bootstrap did.

If I wanted to follow SemVer I should have released a 5.0.0, but then people would have asked why to use Bootstrap 4 they needed bootstrap-material-design 5 :-(

christian-graf · 2019-06-13T13:23:02Z

Hi,

in my environment there are still bootstrap ~4.2.1 and bmd 4.1.1 is working.
BMD 4.1.2 leads to another error :(

Therefore i think this issue is not really fixed well :/

FezVrasta · 2019-06-13T13:31:34Z

Knowing the error would be extremely helpful 🔮

chicouskiluiz · 2020-04-28T16:00:24Z

Hello.
I'm having this problem in version 4.4.1 of the bootstrap and with the bootstrap material design 4.1.2.
Is there any correction for this?
I tried to add the third parameter as "none", but I had this error: SassError: Top-level selectors may not contain the parent selector "&".

AndyClausen · 2020-04-30T15:29:13Z

Does it work if you downgrade bootstrap to 4.3.x or 4.2.x? And are you sure that bmd is on latest version? :)

chicouskiluiz · 2020-04-30T17:40:11Z

@AndyClausen In version 4.3.1 of the bootstrap I have this error:

SassError: Missing argument $ icon.
    ┌──> node_modules / bootstrap-material-design / scss / mixins / _forms.scss
159│ @include form-validation-state ("valid", $ label-color);
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^ invocation
    ╵
    ┌──> node_modules / bootstrap / scss / mixins / _forms.scss
29 │ @mixin form-validation-state ($ state, $ color, $ icon) {
    │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ declaration
    ╵

In version 4.2.1 and 4.1.1:
SassError: Top-level selectors may not contain the parent selector "&".

I did the tests with version 4.1.1. I believe it is the latest available for npm installation.

AndyClausen · 2020-04-30T19:26:48Z

This might be a long shot, but could you check if the version strings have ^? If so, try removing them.

diegoulloao · 2020-05-31T21:53:14Z

Any solution??? with @4.1 doesn't work

AndyClausen · 2020-05-31T23:06:07Z

There is a solution if you read the comments.
Please make sure you're using exact versions, and if it still doesn't work, post your package.json entries for bmd and bootstrap here.

FezVrasta added the bug confirmed label Feb 15, 2019

FezVrasta closed this as completed May 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incompatibility with bootstrap > 4.1 #1351

Incompatibility with bootstrap > 4.1 #1351

christian-graf commented Feb 15, 2019

christian-graf commented Feb 15, 2019

FezVrasta commented Feb 15, 2019

christian-graf commented Feb 18, 2019

ndesorden commented Mar 11, 2019 •

edited

Loading

aleksander-tatskiy commented Mar 21, 2019

dvdknaap commented Mar 22, 2019

CKGrafico commented May 22, 2019

FezVrasta commented May 22, 2019

ghost commented May 23, 2019 •

edited by ghost

Loading

FezVrasta commented May 23, 2019

christian-graf commented Jun 13, 2019

FezVrasta commented Jun 13, 2019

chicouskiluiz commented Apr 28, 2020 •

edited

Loading

AndyClausen commented Apr 30, 2020

chicouskiluiz commented Apr 30, 2020 •

edited

Loading

AndyClausen commented Apr 30, 2020

diegoulloao commented May 31, 2020 •

edited

Loading

AndyClausen commented May 31, 2020

Incompatibility with bootstrap > 4.1 #1351

Incompatibility with bootstrap > 4.1 #1351

Comments

christian-graf commented Feb 15, 2019

Test Case

Summary

Additional Information

christian-graf commented Feb 15, 2019

more additional information

FezVrasta commented Feb 15, 2019

christian-graf commented Feb 18, 2019

ndesorden commented Mar 11, 2019 • edited Loading

aleksander-tatskiy commented Mar 21, 2019

dvdknaap commented Mar 22, 2019

CKGrafico commented May 22, 2019

FezVrasta commented May 22, 2019

ghost commented May 23, 2019 • edited by ghost Loading

FezVrasta commented May 23, 2019

christian-graf commented Jun 13, 2019

FezVrasta commented Jun 13, 2019

chicouskiluiz commented Apr 28, 2020 • edited Loading

AndyClausen commented Apr 30, 2020

chicouskiluiz commented Apr 30, 2020 • edited Loading

AndyClausen commented Apr 30, 2020

diegoulloao commented May 31, 2020 • edited Loading

AndyClausen commented May 31, 2020

ndesorden commented Mar 11, 2019 •

edited

Loading

ghost commented May 23, 2019 •

edited by ghost

Loading

chicouskiluiz commented Apr 28, 2020 •

edited

Loading

chicouskiluiz commented Apr 30, 2020 •

edited

Loading

diegoulloao commented May 31, 2020 •

edited

Loading