Search code examples
reactjsbootstrap-5react-bootstrap

SASS compilation error in Bootstrap after upgrading to React 18

After upgrading React from 17.0.2 to 18.2.0 application does not compile anymore due to SASS compilation error, which looks like this:

SassError: property "url" must be followed by a ':'
        on line 6 of node_modules/bootstrap/dist/css/bootstrap.min.css
>> size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg x
   ------------------------------------------^

There are Bootstrap and node-sass packages that I use:

    "bootstrap": "^5.1.3",
    "react-bootstrap": "^2.2.2",
    "node-sass": "^7.0.1"

I did not update versions of any other packages except for react and react-dom, although I tried updating bootstrap, react-bootstrap and node-sass too to the newest available versions, but this does not fix the issue.

What could cause this error? I fail to see how this could be an issue with React 18.

Solution

  • I did a bit of digging and thought your issue would be related to this - https://github.com/sass/node-sass/issues/2931 but this bug is related to the interpolation of sass variables into a css variable which causes the same compilation error. They also mention the issues are prevalent when using bootstrap 5.1.3 and 5.2.3.

    Have you considered node-sass is deprecated? https://www.npmjs.com/package/node-sass

    enter image description here

    Check out this previous answer where the user offers to use just sass instead. Hopefully moving away from node-sass will allow the compilation to work again.