0

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.

Karolis
  • 255
  • 3
  • 15

1 Answers1

1

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.

Tiberiuscan
  • 413
  • 4
  • 8