Incompatibility with bootstrap > 4.1

[christian-graf]

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?

[christian-graf]

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]

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]

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

With 4.2.1 still works

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

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

[aleksander-tatskiy]

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]

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]

Still the same...

[FezVrasta]

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

[ghost]

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]

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]

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]

Knowing the error would be extremely helpful 🔮

[chicouskiluiz]

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]

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]

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

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

[diegoulloao]

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

[AndyClausen]

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.