Sass is not working with node 15+

[steveetm]

I have no fibers installed, and using fibers: false, have no refernce to fibers anywhere, not even installed!

I have strange issues with sass when I upgrade node from 14. Our project setup is pretty complex and I couldn't create a standalone repro yet, but pretty sure the issue is with sass itself.

If I upgrade to e.g. to node 16 and replace sass-loader with null-loader, everything fine. But with sass-loader it always hangs at some scss file. It is almost impossible to figure out where, as when I inspect this hanging node process and press 'pause', the inspector itself freeze, eventually segfaulting node process. The only usable information I managed to get, is a stacktrace on sigint, which is the following:

    at ./node_modules/sass/sass.dart.js:4372:11
    at call$2 (./node_modules/sass/sass.dart.js:25904:12)
    at call$1 (./node_modules/sass/sass.dart.js:25890:32)
    at _rootRunUnary (./node_modules/sass/sass.dart.js:4749:18)
    at ./node_modules/sass/sass.dart.js:91240:16
    at runUnary$2$2 (./node_modules/sass/sass.dart.js:27305:39)
    at call$0 (./node_modules/sass/sass.dart.js:26379:51)
    at _Future__propagateToListeners (./node_modules/sass/sass.dart.js:4548:93)
    at _completeWithValue$1 (./node_modules/sass/sass.dart.js:26221:9)
    at complete$1 (./node_modules/sass/sass.dart.js:25877:14)

Tried with recent version and almost every version back to 1.35.2 (the above trace created with that version).
The very same version works perfectly with node 14, without fibers! Tried node 15, 16, 17, x86 and arm versions, same result.

Appreciate any advices.

Update
Looks like I found the breaking version.
1.32.13 working fine even with node 16, but 1.33.0 fails. Really strange:/

[nex3]

Can you provide a minimal reproduction?

[steveetm]

Actually I managed to find the file which cause the issue, if I build the whole project. But actually that file does nothing interesting, uses a globally included mixin and extends an ionicon class.
If move imports into that file, and build only that, everything is fine again. Once I include that file in the project, it stops right there(Put some debug info into sass compiler to see which import is being processed, that file is the breaking point).
There is also a lot of stuff to compile after that.

My original thought that there is some kind of filesystem case inconsistency, and due how our monorepo structured and modules included, sass import run into some crazy async import thing, but this is clearly not the case.

Do you have any advice how to continue debug this? I can stop the chrome debugger anytime before that import, when that file is being compiled, inspector is unusable:/ (atm trying to narrow down rules in that file)

[steveetm]

Worth to note long ago I reported a regression with @extends, which was turned out as a bug:
sass/dart-sass#1109

In our legacy scss code we have some really crazy extends, but this used to be work, and nothing new added as we are moving into separate scss modules wherever possible. Maybe it rings some bells.

[steveetm]

Okey, found a standalone repro(the inliner is not correct, I know, removed logic which is not needed for the repro):

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@function replaceWrap($str) {
  $str: str-replace($str, '"', $replace: '%22');
}

@function logo($color) {

  @return replaceWrap('<svg  xmlns:dc="http://purl.org/dc/elements/1.1/"  xmlns:cc="http://creativecommons.org/ns#"  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"  xmlns:svg="http://www.w3.org/2000/svg"  xmlns="http://www.w3.org/2000/svg"  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"  width="786.81995"  height="786.81995"  viewBox="0 0 208.17944 208.17944"  version="1.1"  id="svg4443"  inkscape:version="0.92.0 r15299"  sodipodi:docname="xero.svg"><defs id="defs4437"> <inkscape:perspective  id="perspective87"  inkscape:persp3d-origin="372.04723 : 350.78736 : 1"  inkscape:vp_z="744.09449 : 526.18106 : 1"  inkscape:vp_y="0 : 999.99994 : 0"  inkscape:vp_x="0 : 526.18106 : 1"  sodipodi:type="inkscape:persp3d" /> <font  font-weight="700"  font-style="normal"  font-variant="normal"  id="FontID0"  horiz-origin-x="0"  horiz-origin-y="0"  horiz-adv-x="90"  vert-origin-x="45"  vert-origin-y="90"  vert-adv-y="90"  style="font-style:normal;font-variant:normal;font-weight:700"> <font-face id="font-face7" font-family="Arial Narrow"> </font-face> <missing-glyph id="missing-glyph9"> <path id="path11" d="M0 0z" /> </missing-glyph> <glyph id="glyph13" horiz-adv-x="228" unicode=" " /> <glyph id="glyph15" horiz-adv-x="500" unicode="L"> <path id="path17" d="M62.9955 0l0 710 118.173 0 0 -589.33 294.829 0 0 -120.669 -413.002 0z" /> </glyph> <glyph id="glyph19" horiz-adv-x="774" unicode="W"> <path id="path21" d="M142.504 0l-140.007 715.836 121.501 0 87.8301 -491.667 107.507 491.667 141.168 0 102.996 -500 90.3377 500 119.158 0 -142.657 -715.836 -126.002 0 -117.165 535.171 -116.169 -535.171 -128.499 0z" /> </glyph> <glyph id="glyph23" horiz-adv-x="456" unicode="k"> <path id="path25" d="M55.1662 0l0 715.836 112.829 0 0 -379.834 131.335 182.493 138.671 0 -145.504 -189.326 155.666 -329.169 -120.998 0 -107.496 232.83 -51.6732 -66.828 0 -166.002 -112.829 0z" /> </glyph> <glyph id="glyph27" horiz-adv-x="456" unicode="e"> <path id="path29" d="M305.67 164.995l111.833 -22.8308c-15.0015,-52.1659 -38.336,-90.8304 -69.8393,-115.994 -31.6675,-25.3384 -69.9926,-37.8323 -115.161,-37.8323 -62.8312,0 -111.34,20.9912 -145.668,62.9955 -40.3289,48.8371 -60.4989,117.165 -60.4989,204.995 0,86.6694 20.3342,156.005 61.0026,208.007 34.4926,43.9972 79.1577,65.9958 133.831,65.9958 60.8274,0 108.668,-22.5023 143.161,-67.4959 39.6719,-51.3337 59.5024,-127.174 59.5024,-227.498l-0.503701 -15.6695 -281.657 0c0.657001,-40.9969 9.83312,-72.6644 27.4955,-95.1667 17.8376,-22.5023 39.1682,-33.6713 64.1671,-33.6713 36.1679,0 60.3346,24.6704 72.3359,74.1645zm6.32911 138.671c-0.996452,40.3289 -9.66887,70.8357 -25.8311,91.1699 -16.3374,20.3342 -35.6642,30.4958 -58.1665,30.4958 -23.663,0 -43.8329,-10.6653 -60.0061,-31.8317 -16.6659,-21.4949 -24.8237,-51.3337 -24.4952,-89.834l168.499 0z" /> </glyph> <glyph id="glyph31" horiz-adv-x="500" unicode="o"> <path id="path33" d="M32.6639 266.666c0,50.6658 10.1726,96.9953 30.3316,138.671 20.1699,41.6648 46.5048,72.8286 79.1687,93.6665 32.4997,20.8269 69.1713,31.328 109.84,31.328 68.3282,0 121.994,-26.8276 161.162,-80.3294 39.004,-53.6661 58.495,-116.169 58.495,-187.837 0,-53.3376 -10.1616,-101.496 -30.4958,-144.497 -20.3342,-43.0007 -46.9975,-75.3362 -80.0009,-96.8311 -33.1676,-21.6701 -69.3356,-32.4997 -108.668,-32.4997 -63.1597,0 -115.665,23.9915 -157.33,72.1607 -41.6648,48.1692 -62.5027,116.837 -62.5027,206.167zm115.337 -7.33652c0,-52.4944 10.1616,-92.1664 30.671,-118.994 20.4984,-26.8385 45.3331,-40.1647 74.3288,-40.1647 28.3277,0 52.4944,13.4904 72.6644,40.4932 20.1699,27.0028 30.3316,66.8389 30.3316,119.673 0,51.3337 -10.3259,90.5019 -30.8243,117.658 -20.5094,27.0028 -45.0046,40.5041 -73.6718,40.5041 -28.3387,0 -52.6696,-13.5014 -73.0038,-40.5041 -20.3342,-27.1561 -30.4958,-66.6637 -30.4958,-118.665z" /> </glyph> <glyph id="glyph35" horiz-adv-x="456" unicode="c"> <path id="path37" d="M429.668 365.161l-110.836 -24.331c-8.16872,54.334 -33.6604,81.501 -76.6611,81.501 -27.6707,0 -50.0088,-11.6618 -66.8389,-35.1605 -16.9944,-23.3345 -25.5026,-63.0064 -25.5026,-118.676 0,-61.4953 8.50817,-105 25.5026,-130.327 16.8302,-25.3384 39.4967,-37.9966 67.8354,-37.9966 21.1664,0 38.5003,7.16132 52.1659,21.6591 13.8299,14.5088 23.4988,40.1647 29.3351,76.8363l110.836 -22.8308c-22.6665,-125.005 -88.3338,-187.497 -196.673,-187.497 -69.3356,0 -120.834,26.3239 -154.33,78.9935 -33.4961,52.8339 -50.3373,116.333 -50.3373,190.498 0,88.8375 18.9983,156.509 56.8306,202.838 38.0075,46.3296 87.6768,69.6641 149.172,69.6641 49.8336,0 90.5019,-13.1619 121.83,-39.661 31.5032,-26.3348 54.0055,-68.1748 67.6711,-125.509z" /> </glyph> <glyph id="glyph39" horiz-adv-x="228" unicode="i"> <path id="path41" d="M59.163 588.838l0 126.998 112.676 0 0 -126.998 -112.676 0zm0 -588.838l0 518.495 112.676 0 0 -518.495 -112.676 0z" /> </glyph> <glyph id="glyph43" horiz-adv-x="500" unicode="n"> <path id="path45" d="M445.83 0l-112.829 0 0 264.662c0,53.0091 -2.1681,88.3338 -6.32911,106.007 -4.17196,17.4981 -12.1764,30.9995 -23.674,40.4932 -11.4975,9.34037 -24.6595,14.1693 -39.3325,14.1693 -18.834,0 -36.0037,-6.16486 -51.3337,-18.3303 -15.1658,-12.1655 -25.9954,-29.0066 -32.1602,-50.5015 -6.17581,-21.4949 -9.34037,-61.999 -9.34037,-121.666l0 -234.834 -112.665 0 0 518.495 104.496 0 0 -76.1574c18.5055,29.3242 39.3325,51.3337 62.667,65.9958 23.3345,14.6621 49.0014,21.9986 77.34,21.9986 32.9924,0 60.6631,-8.66147 83.3297,-25.6669 22.6665,-17.1696 38.1718,-39.1682 46.8333,-65.9958 8.67242,-26.8385 12.9977,-65.6673 12.9977,-116.333l0 -322.336z" /> </glyph> <glyph id="glyph47" horiz-adv-x="456" unicode="a"> <path id="path49" d="M142.996 360.332l-101.999 22.5023c12.3407,52.3302 32.8391,89.9982 61.3311,112.993 28.5029,23.006 69.3356,34.5035 122.837,34.5035 47.5012,0 83.8334,-6.66856 108.832,-19.9947 24.9989,-13.5014 43.0007,-31.5032 53.6661,-54.4983 10.8405,-23.006 16.1732,-64.6708 16.1732,-125.334l-1.0074 -160.166c0,-44.8403 1.8396,-78.3365 5.33266,-100.335 3.66826,-21.8343 10.3368,-45.3331 20.0057,-70.0035l-111.34 0 -14.6621 56.6664c-19.1625,-22.8308 -39.661,-39.8362 -61.6705,-51.3337 -21.9986,-11.3333 -45.3331,-16.9944 -70.1568,-16.9944 -41.3363,0 -75.1719,13.8299 -101.507,41.6648 -26.3348,27.835 -39.4967,64.8351 -39.4967,111.165 0,29.1709 5.33266,54.8377 15.998,76.6611 10.8296,21.8343 25.9954,39.1682 45.4974,52.1659 19.502,13.0086 50.841,24.6704 93.6665,34.6678 52.1659,12.0012 88.4981,23.3345 109.007,33.6713 0,28.6672 -2.00385,47.5012 -6.17581,56.5021 -3.99676,8.82572 -11.4975,16.1622 -22.4913,21.8343 -10.8405,5.82541 -26.1706,8.66147 -46.0011,8.66147 -20.3342,0 -36.1679,-4.66471 -47.6655,-13.6656 -11.5085,-9.16517 -21.0021,-26.1706 -28.1744,-51.3337zm150.508 -111.329c-14.3336,-5.83636 -36.6716,-12.6692 -67.0032,-20.4984 -34.832,-9.17612 -57.4986,-19.1735 -68.3391,-30.3425 -10.6653,-10.9938 -15.998,-25.3274 -15.998,-42.8255 0,-19.8414 5.83636,-36.6716 17.6733,-50.173 12.0012,-13.5014 26.8276,-20.159 44.8294,-20.159 15.8337,0 31.6675,5.33266 47.337,16.3265 15.4943,10.8405 26.3348,23.8382 32.4997,38.8397 6.00061,14.9906 9.00092,42.1576 9.00092,81.4901l0 27.3422z" /> </glyph> <glyph id="glyph51" horiz-adv-x="500" unicode="d"> <path id="path53" d="M449.17 0l-105 0 0 76.1684c-17.1696,-29.3351 -37.5038,-51.3337 -61.0026,-65.8315 -23.3345,-14.673 -47.5012,-21.9986 -72.1716,-21.9986 -47.6655,0 -88.9908,23.663 -124.327,71 -35.3357,47.326 -52.9981,114.997 -52.9981,202.827 0,88.6733 17.3339,155.337 51.8265,200.506 34.5035,44.9936 77.0006,67.6602 127.338,67.6602 23.8273,0 46.0011,-6.00061 66.6637,-18.1661 20.6627,-12.0012 39.6719,-30.0031 57.0058,-54.1698l0 257.84 112.665 0 0 -715.836zm-300.173 270.498c0,-46.8333 3.83251,-81.8295 11.837,-104.66 8.00447,-23.006 19.502,-40.3399 34.1641,-51.8374 14.8373,-11.4975 31.5032,-17.3339 50.173,-17.3339 24.6595,0 46.1653,13.3371 64.3314,40.0004 18.3303,26.6633 27.3313,67.0032 27.3313,120.669 0,59.4915 -8.83667,102.492 -26.4991,128.663 -17.8376,26.1706 -40.3399,39.3325 -67.6711,39.3325 -25.9954,0 -48.1582,-12.8334 -66.3352,-38.6645 -18.3303,-25.6669 -27.3313,-64.3314 -27.3313,-116.169z" /> </glyph> <glyph id="glyph55" horiz-adv-x="318" unicode="r"> <path id="path57" d="M166.999 0l-112.829 0 0 518.495 104.496 0 0 -73.6608c18.0018,34.5035 33.9998,57.3343 48.1692,68.6676 14.1693,11.169 30.4958,16.8302 49.0014,16.8302 25.6669,0 50.3263,-8.66147 73.8251,-25.9954l-35.1605 -119.498c-18.6698,14.8263 -36.1679,22.3271 -52.8339,22.3271 -15.6695,0 -29.3351,-5.66116 -41.1721,-17.3339 -11.9903,-11.4975 -20.4984,-32.3354 -25.6669,-62.667 -5.15746,-30.3316 -7.82927,-86.0015 -7.82927,-166.999l0 -160.166z" /> </glyph> <glyph id="glyph59" horiz-adv-x="272" unicode="t"> <path id="path61" d="M253.504 518.495l0 -109.325 -76.6721 0 0 -209.003c0,-45.1688 0.996452,-71.5037 3.33976,-78.5007 4.48951,-13.1619 13.8299,-19.6662 27.824,-19.6662 10.5011,0 25.3384,4.50046 45.0046,13.1619l9.66887 -106.325c-26.0063,-13.6656 -55.5057,-20.4984 -88.3338,-20.4984 -28.6672,0 -51.6732,6.83282 -68.8319,20.4984 -17.3339,13.6656 -28.8314,33.3319 -34.6678,58.9987 -4.66471,18.9983 -6.83282,57.3343 -6.83282,115.337l0 225.998 -51.8374 0 0 109.325 51.8374 0 0 103.171 112.829 80.0009 0 -183.172 76.6721 0z" /> </glyph> <glyph id="glyph63" horiz-adv-x="638" unicode="w"> <path id="path65" d="M138.671 0l-134.839 518.495 109.5 0 79.4972 -339.823 73.3323 339.823 108.34 0 70.8357 -339.823 81.501 339.823 110.825 0 -136.667 -518.495 -108 0 -73.1681 333.505 -72.3249 -333.505 -108.832 0z" /> </glyph> <glyph id="glyph67" horiz-adv-x="456" unicode="y"> <path id="path69" d="M5.33266 518.495l120.166 0 101.003 -368.162 99.6671 368.162 116.169 0 -149.84 -498.993 -28.8314 -97.1705c-12.6692,-36.4964 -25.3274,-63.1597 -37.8323,-80.0009 -12.5049,-16.9944 -28.5029,-29.9921 -47.8297,-39.1682 -19.3377,-9.00092 -43.165,-13.6656 -71.5037,-13.6656 -21.8343,0 -43.165,2.83606 -64.0029,8.33297l-9.83312 107.507c17.6733,-4.33621 33.3319,-6.34006 47.337,-6.34006 21.4949,0 39.1682,7.17227 52.9981,21.3416 13.8299,14.3226 25.1632,40.4932 33.9998,78.1613l-161.666 519.995z" /> </glyph> </font> <style  id="style71"  type="text/css">  @font-face { font-family:&quot;Arial Narrow&quot;;src:url(&quot;#FontID0&quot;) format(svg)} .fil0 {fill:#28166F} .fnt0 {font-weight:bold;font-size:9.1324;}  </style> <clipPath  clipPathUnits="userSpaceOnUse"  id="clipPath18">  <path  d="M 0,850.394 H 850.394 V 0 H 0 Z"  id="path16"  inkscape:connector-curvature="0" /> </clipPath> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.68000308" inkscape:cx="391.90999" inkscape:cy="391.90999" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" units="px" inkscape:window-width="1280" inkscape:window-height="744" inkscape:window-x="-4" inkscape:window-y="-4" inkscape:window-maximized="1" /> <metadata id="metadata4440"> <rdf:RDF>  <cc:Work  rdf:about="">  <dc:format>image/svg+xml</dc:format>  <dc:type  rdf:resource="http://purl.org/dc/dcmitype/StillImage" />  <dc:title></dc:title>  </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-5.8874759,-271.69643)"> <g  id="g10"  transform="matrix(0.35277777,0,0,-0.35277777,-39.929542,525.63751)">  <g  id="g12">  <g  id="g14"  clip-path="url(#clipPath18)">  <path   d="m 424.933,130.843 c 162.335,0 293.932,131.597 293.932,293.933 0,162.334 -131.597,293.932 -293.932,293.932 C 262.598,718.708 131,587.11 131,424.776 131,262.44 262.598,130.843 424.933,130.843"   fill="#{$color}" style="fill-opacity:1;fill-rule:nonzero;stroke:none"   id="path20"   inkscape:connector-curvature="0" />  <path   d="m 271.701,425.625 50.162,50.286 c 1.663,1.695 2.591,3.939 2.591,6.319 0,4.96 -4.032,8.988 -8.992,8.988 -2.416,0 -4.681,-0.947 -6.389,-2.676 -0.005,-0.01 -50.117,-50.093 -50.117,-50.093 l -50.341,50.168 c -1.701,1.677 -3.955,2.601 -6.345,2.601 -4.954,0 -8.987,-4.026 -8.987,-8.981 0,-2.417 0.965,-4.685 2.697,-6.394 l 50.155,-50.148 -50.129,-50.223 c -1.762,-1.735 -2.723,-4.008 -2.723,-6.436 0,-4.959 4.033,-8.982 8.987,-8.982 2.394,0 4.65,0.929 6.345,2.625 l 50.263,50.195 50.072,-50.012 c 1.776,-1.836 4.067,-2.814 6.512,-2.814 4.955,0 8.987,4.029 8.987,8.988 0,2.393 -0.927,4.641 -2.614,6.336 z"   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"   id="path22"   inkscape:connector-curvature="0" />  <path   d="m 569.906,425.64 c 0,-9.006 7.323,-16.332 16.34,-16.332 8.996,0 16.322,7.326 16.322,16.332 0,9.008 -7.326,16.333 -16.322,16.333 -9.017,0 -16.34,-7.325 -16.34,-16.333"   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"   id="path24"   inkscape:connector-curvature="0" />  <path   d="m 538.93,425.632 c 0,26.08 21.216,47.3 47.299,47.3 26.07,0 47.291,-21.22 47.291,-47.3 0,-26.074 -21.221,-47.285 -47.291,-47.285 -26.083,0 -47.299,21.211 -47.299,47.285 m -18.606,0 c 0,-36.334 29.565,-65.895 65.905,-65.895 36.339,0 65.919,29.561 65.919,65.895 0,36.339 -29.58,65.908 -65.919,65.908 -36.34,0 -65.905,-29.569 -65.905,-65.908"   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"   id="path26"   inkscape:connector-curvature="0" />  <path   d="m 515.646,490.413 -2.765,0.008 c -8.301,0 -16.307,-2.618 -22.994,-7.771 -0.881,4.032 -4.485,7.066 -8.778,7.066 -4.941,0 -8.9,-3.959 -8.912,-8.91 0,-0.018 0.03,-111 0.03,-111 0.013,-4.942 4.044,-8.959 8.988,-8.959 4.943,0 8.973,4.017 8.986,8.97 0,0.022 0.004,68.251 0.004,68.251 0,22.748 2.08,31.935 21.566,34.37 1.801,0.224 3.76,0.189 3.768,0.189 5.332,0.183 9.121,3.847 9.121,8.799 0,4.955 -4.045,8.987 -9.014,8.987"   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"   id="path28"   inkscape:connector-curvature="0" />  <path   d="m 343.072,436.482 c 0,0.246 0.019,0.502 0.031,0.755 5.218,20.627 23.899,35.891 46.147,35.891 22.517,0 41.369,-15.639 46.32,-36.646 z m 110.903,1.697 c -3.873,18.337 -13.912,33.399 -29.199,43.072 -22.346,14.187 -51.854,13.402 -73.438,-1.947 -17.606,-12.525 -27.769,-33.014 -27.769,-54.12 0,-5.292 0.638,-10.634 1.966,-15.892 6.648,-26.152 29.13,-45.949 55.934,-49.23 7.954,-0.963 15.696,-0.502 23.713,1.574 6.889,1.676 13.555,4.47 19.697,8.406 6.375,4.098 11.701,9.502 16.859,15.971 0.104,0.119 0.209,0.224 0.313,0.349 3.58,4.44 2.916,10.754 -1.018,13.768 -3.318,2.543 -8.888,3.574 -13.271,-2.039 -0.942,-1.342 -1.993,-2.723 -3.15,-4.104 -3.485,-3.851 -7.809,-7.582 -12.99,-10.476 -6.593,-3.522 -14.106,-5.535 -22.093,-5.58 -26.142,0.291 -40.131,18.539 -45.107,31.564 -0.869,2.432 -1.539,4.955 -2.006,7.553 -0.061,0.486 -0.106,0.955 -0.124,1.387 5.405,0 93.812,0.015 93.812,0.015 12.861,0.27 19.783,9.348 17.871,19.729"   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"   id="path30"   inkscape:connector-curvature="0" />  </g>  </g> </g> </g> </svg>');
}

.logo {
  background-url: logo(red);
}

const sass = require('sass');

sass.render({
    file: "repro.scss"
}, function(err, result) {
    // Never called :(
    if (err) {
        console.log(err);
    } else {
        console.log(result.css.toString());
    }
});

This throws a stack overflow if I run with sass from command line. It hangs if webpack tries to compile it through sass-loader. But honestly, I don't understand what is going on, as this repro is failing even with Node 14 and 1.32.13:/ And we use this for ages.
Even if this is a stack overflow(I accept this whole is screwed up), it shouldn't just hang. (sass-loader issue? But why it is killing inspector? Or when used through sass-loader this isn't really a stack overflow as render is async, so it simply recursively fill up microtask queue forever?)

[steveetm]

And here is the workaround:

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    $tmp: str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    @return str-slice($string, 1, $index - 1) + $replace + $tmp;
  }

  @return $string;
}

And webpack now can build it with node 14,15,16,17.
@nex3 While this also stress sass a bit, I think there are two bugs actually:

• sass not reporting error in async mode.
• this is not really deep recursion which should trigger this.

Not sure why extracting the function call into a tmp variable helps, but it does:/

[jurchiks]

I don't know about you guys, but I am on Node 16.15.0 LTS and SASS 1.51.0, no problems here.
Perhaps the bug has been solved since then, or it's some bit of code that my project doesn't access, can't tell.
Or maybe the issue title needs to be made more specific?

[jathak]

It looks like the issue here is that the recursion gets too deep, causing a stack overflow. You should use a for loop instead to avoid this.

[steveetm]

@jathak Recursion itself can't be the issue, have you checked my workaround?

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    $tmp: str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    @return str-slice($string, 1, $index - 1) + $replace + $tmp;
  }

  @return $string;
}

is working, but if you inline $tmp it runs into error. The depth of recursion shouldn't depend on the placement of that call at all.

Also, there is another issue, in async mode this error is not reported, as I said earlier. It simply waits forever, this is also a bug.

[jathak]

The recursion depth is actually different there, since there's fewer layers of expressions to evaluate (since we're running into Dart/Node's recursion depth limit here, not any limit we've set in the Sass language itself). When running async, it waits (seemingly) forever because it's taking a very long time, but because it's asynchronous, it never actually stack overflows.

[benbcai]

Are there any updates on this issue?

I have a project using sass@1.54.8 with Node 14 and everything seems to work fine. When I upgraded to Node 16, my project is now hanging indefinitely during webpack. There are no error messages, it just hangs forever. If I switch from sass back to node-sass and still on Node 16, then everything started working again.

[nex3]

@benbcai It's likely that you're also hitting a recursion limit somewhere. Can you narrow down which part of your Sass code is the culprit by deleting things until the failure stops happening? It'll be much easier to help you if you can.

[steveetm]

@nex3 Sorry, I just can't believe this. If you check my workaround you can clearly see this shouldn't caused by recursion limit, as a simple temp variable extraction solves the problem. But ok, there is a limit. Why can't sass print some warning if hits some kind of 'recursion limit' during async processing?

(just ran into this again, same workaround still working:

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    $tmp: str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    @return str-slice($string, 1, $index - 1) + $replace + $tmp;
  }

  @return $string;
}

but inlineing $tmp in the return line causes infinite loop...
)