🐛 BUG: renderer-lit - Preprocessor dependency "sass" failed to load

[Enteleform]

What version of astro are you using?

0.23.0-next.10

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

Expected

Using @astrojs/renderer-lit with sass will work without issue.

Actual

Error when evaluating SSR module \src\Pages\index.astro:
TypeError: Cannot read properties of undefined (reading 'length')
  at \node_modules\sass\sass.dart.js:99070:33
  at dartProgram (\node_modules\sass\sass.dart.js:99072:5)
  at Object.exports.load (\node_modules\sass\sass.dart.js:99080:3)
  at Object.<anonymous> (\node_modules\sass\sass.default.dart.js:2:9)
  at Module._compile (node:internal/modules/cjs/loader:1101:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
  at Module.load (node:internal/modules/cjs/loader:981:32)
  at Function.Module._load (node:internal/modules/cjs/loader:822:12)
  at Module.require (node:internal/modules/cjs/loader:1005:19)
  at require (node:internal/modules/cjs/helpers:102:18)

Error: Preprocessor dependency "sass" failed to load:
Cannot read properties of undefined (reading 'length')
  at loadPreprocessor (\node_modules\vite\dist\node\chunks\dep-971d9e33.js:19112:29)
  at scss (\node_modules\vite\dist\node\chunks\dep-971d9e33.js:19120:20)
  at sass (\node_modules\vite\dist\node\chunks\dep-971d9e33.js:19171:56)
  at compileCSS (\node_modules\vite\dist\node\chunks\dep-971d9e33.js:18850:40)
  at async TransformContext.transform (\node_modules\vite\dist\node\chunks\dep-971d9e33.js:18485:50)
  at async Object.transform (\node_modules\vite\dist\node\chunks\dep-971d9e33.js:38318:30)
  at async doTransform (\node_modules\vite\dist\node\chunks\dep-971d9e33.js:53014:29)

Notes

These are the configurations I tested:

• Single Renderer

  • ❌ Issue Resolved
  • @astrojs/renderer-lit only renderer @ astro.config.mjs
  • non-lit components excluded @ Pages/index.astro

• Multiple Renderers

  • ❌ Issue Resolved
  • @astrojs/renderer-lit included @ astro.config.mjs
  • lit component included @ Pages/index.astro

• Multiple Renderers (⭐ current state @ CodeSandbox ⭐)

  • ❌ Issue Resolved
  • @astrojs/renderer-lit included @ astro.config.mjs
  • lit component excluded @ Pages/index.astro

• Multiple Renderers

  • ✔️ Issue Resolved
  • @astrojs/renderer-lit excluded @ astro.config.mjs
  • lit component excluded @ Pages/index.astro

Link to Minimal Reproducible Example

https://codesandbox.io/s/github/enteleform-codesandbox/0008--Astro--SassLit?file=/astro.config.mjs:93-140

[Enteleform]

PS: CodeSandbox & StackBlitz seem to reproduce this, although they do so unreliably.

I'm currently getting this error:

However, I've also seen the sass error occur there as well, on several separate page loads. Not sure what's going on there, but the issue occurs reliably with a local installation.

[Enteleform]

Update: I did run into that second error from my previous comment on my local machine at some point. Seems like it's related to dependency version conflicts when multiple versions of astro and/or renderers exist, for yarn at least.

Related thread @ https://discord.com/channels/830184174198718474/940653527489994892/940730826344243290

Also - just saw a weird thing happen @ CodeSandbox: first it showed the original error, then I left the tab open in the background while writing this, and when I went back to CodeSandbox the page auto-refreshed and displayed the second error. Cache-related maybe?

[FredKSchott]

This is a known issue in lit! tracking a fix here: lit/lit#2393

[moritzlang]

@FredKSchott
I guess manually adding a import "sass" statement inside the astro.config.mjs file would be viable fix until this issue is resolved?