Sass in browser not workig

[nbsharath]

I am trying to use sass in the browser through webpack bundle.

import * as sass from "sass";
const compiledCSS = await sass.compileStringAsync(value);

But its giving this error

error TypeError: J.getInterceptor$x(...) is undefined
    get$isTTY$x sass.dart.js:28035
    hasTerminal0 sass.dart.js:22668
    compileStringAsync1 sass.dart.js:19377
    installTearOffs sass.dart.js:112321
    Primitives_applyFunction sass.dart.js:1143
    Function_apply sass.dart.js:5375
    _callDartFunctionFast sass.dart.js:7244
    ret sass.dart.js:7222
    logic scss-to-css-converter.ts:5
    onClickHandle index.tsx:54
    callCallback react-dom.development.js:19443
    invokeGuardedCallbackImpl react-dom.development.js:19492
    invokeGuardedCallback react-dom.development.js:19567
    invokeGuardedCallbackAndCatchFirstError react-dom.development.js:19581
    executeDispatch react-dom.development.js:30635
    processDispatchQueueItemsInOrder react-dom.development.js:30667
    processDispatchQueue react-dom.development.js:30680
    dispatchEventsForPlugins react-dom.development.js:30691
    dispatchEventForPluginEventSystem react-dom.development.js:30881
    batchedUpdates$1 react-dom.development.js:23761
    batchedUpdates react-dom.development.js:27597
    dispatchEventForPluginEventSystem react-dom.development.js:30880
    dispatchEvent react-dom.development.js:28653
    dispatchDiscreteEvent react-dom.development.js:28624

I have webpack.

Browser:

firefox

OS:

windows

Version

^1.66.1

[Goodwine]

Could you provide a minimal repro? That would be either a github repo that we can clone and test against, or a set of npm install ... commands and a repro script.

I imagine that given the error you are seeing, browsers and OSs don't make a difference and get the same error, right?

[nbsharath]

here is the example repo. https://github.com/nbsharath/example-scss
Just to explain more. Its working fine if i directly use it in a component. The issue happens only when i use useEffect to make it work in browser. (I have other imports which are working fine)

[nex3]

This reproduction has 29 dependencies. Can you provide a minimal reproduction that includes as few dependencies as possible to reproduce the issue? Ideally without frameworks like React.

[nbsharath]

Sorry. I have update the the repo

[jgerigmeyer]

Next.js sets a global process variable, which causes an error when Sass tries to check for process.stdout.isTTY here. In the example repo, adding a single line before the call to compileString fixes it:

globalThis.process = null;

I suppose a quick fix would be to more defensively check for process?.stdout?.isTTY or process?.stdout && process.stdout.isTTY == true or something. It's too fragile to rely on browser contexts to never have process defined, I guess.

HT to @jamesnw for help debugging this!

[nbsharath]

@jgerigmeyer Thanks 👍 Will try it.

[nex3]

I think it might be worth adding an isNodeJS getter to package:cli_pkg/js.dart to encapsulate the best-practice way of distinguishing Node.js from other contexts, and just using that in Dart Sass.

[Goodwine]

Finally having some time to look at this. The "robust" way to check whether a script runs on node seems to be ({}).toString.call(X) where X can be either globalThis or process. But I don't think that this will actually fix this bug because this bug isn't failing for incorrectly identifying whether it's running in Node.js. The bug happens because we assume process only exists in Node.js contexts. That said.. we can definitely move both to dart_cli_pkg.

Either way, I think being more defensive with optional chain operators is a good idea, and also setting the process variable only when isNode is true

[Goodwine]

I'm gonna transfer this issue to sass/dart-sass since that's where the problem is, I'll have a PR ready in a few minutes