Build issues with Sass 1.33+ & deprecation warnings

[cpboyd]

Description

Sass has implemented deprecation warnings that you cannot disable: sass/libsass#2822

With a recent change, / for division is deprecated with a message for each instance suggesting to replace with math.div(a,b)

As a result, Gatsby fails:

⠇ Building production JavaScript and CSS bundles
/Users/cpboyd/Documents/drag/projects/gatsby-sites/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

DataCloneError: function destructLexErrorInfo() {
          // remove cyclic references added to error info:
          // info....<omitted>... } could not be cloned.
    at reportError (/Users/cpboyd/Documents/drag/projects/gatsby-sites/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/threadChild.js:100:32)
    at reportClientError (/Users/cpboyd/Documents/drag/projects/gatsby-sites/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/threadChild.js:84:10)
Emitted 'error' event on Worker instance at:
    at Worker.[kOnErrorMessage] (node:internal/worker:298:10)
    at Worker.[kOnMessage] (node:internal/worker:309:37)
    at MessagePort.<anonymous> (node:internal/worker:210:57)
    at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:461:20)
    at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)

Steps to reproduce

I'll work on making a Minimal Reproduction. My current site uses rmwc which references an older version of @material components (and thus older Sass styles).

Expected result

Messages from Sass should be handled during gatsby build without crashing.

Actual result

gatsby build fails when Sass outputs too many errors.

Environment

  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.15.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Edge: 91.0.864.41
    Firefox: 80.0.1
    Safari: 14.1.1
  npmGlobalPackages:
    gatsby-cli: 3.6.0

[LekoArts]

Maybe it's better to report this at css-minimizer-webpack-plugin? Can you verify that a bare minimum webpack setup with css-minimizer-webpack-plugin outputs the error and with Gatsby not?

[cpboyd]

@LekoArts After updating all packages today, the issue seems to be resolved.

[cpboyd]

Actually, it seems that it was related to forgetting to import the math namespace in one file, but the error didn't get propagated up through Gatsby.

[jonmiles]

I've just hit this issue as well, since yesterday my builds are failing with this nbind. The only recent change made were css but it's complaining about cyclic dependencies?

I do not have any math.div usage, I've upgraded all dependencies to the latest version, cleared cache, re-installed etc. but I'm still get this error.

I tried to downgrading/upgrading node.js but I get that sharp module error so I'm kind stuck now.

I don't understand why I suddenly get this error, this should not happen. It's the type of error I would expect when upgrading but not as a result of a simple content change and a webhook triggering a rebuild?

[cpboyd]

@jonmiles The underlying issue that I ran into is that the actual Sass error wasn't written to the Gatsby log output.
Perhaps this is exacerbated by the deprecation warnings overflowing some buffer.

I'd suggest trying to build your Sass separately and seeing if there's an error reported.

[jonmiles]

Actually I fixed my issue in the end, although didn't completely get to the bottom or it.

The issue for me that threw this error, seemed to me using variables in same scss module as used for the dynamic post content i.e. where dangerouslySetInnerHTML is used. They are used in every other module but when used with this component it's fails to build with the above nbind error. I assume it's something to do with dynamic injected content but couldn't find anything specific.

[soirs]

Somehow dart-sass is deprecated and is now named sass - LINK.

I added it withyarn add sass / npm i sass and added this in gatsby-config.js

    {
      resolve: 'gatsby-plugin-sass',
      options: {
        implementation: require('sass'),
      },
    },

Hope it helps ✌️