Fallback to sass if sass-embedded fails

[wesnm]

Describe the bug

The loadSassPackage() function loads sass-embedded without validating that the module is functional and falling back to the sass package where possible (with a warning or something). The sass-embedded package seems to install on any system, regardless of the availability of the needed Dart sass binary. So the import succeeds in loadSassPackage() but will later fail when the pre-processor is actually used.

Quasar installs sass-embedded as a dependency. Vite will try to use the package, but the build will fail with [vite:css] [sass] Embedded Dart Sass couldn't find the embedded compiler executable. Please make sure the optional dependency sass-embedded-freebsd-x64 is installed in node_modules. Of course that package does not exist (and likely never will).

Installing sass and then manually removing sass-embedded from package-lock and node_modules allows project to build. There might be a more elegant way to do it with overrides, but ideally Vite would be able to test/detect that sass-embedded does not work on the platform and fall back to sass before failing.

This isn't really FreeBSD-specific; ideally Vite would fall back to sass if the architecture-specific sass-embedded-<arch> isn't available.

Reproduction

https://sorry.dont.have.one

Steps to reproduce

How to replicate (with Quasar because it will preprocess sass by default):

1. Spin up a FreeBSD environment (or other environment w/o sass-embedded)
2. pkg install npm
3. Scaffold a default Quasar project, including sass pre-processing npm init quasar@latest
4. Run npx quasar build in the project directory, will fail looking for sass-embedded-freebsd-x64
5. npm i sass, npx quasar build, still fails
6. Edit package-lock.json to remove sass-embedded dependency, rm -rf node_modules/sass-embedded
7. Re-run npx quasar build, should succeed.

System Info

System:
    OS: freebsd
    CPU: (8) x64 Intel(R) Core(TM) i3-N305
    Memory: 1.01 GB / 15.74 GB
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm

Used Package Manager

npm

Logs

Debug log of build output:

 Build mode............. spa
 Pkg quasar............. v2.17.7
 Pkg @quasar/app-vite... v2.1.1
 Pkg vite............... v6.2.0
 Debugging.............. enabled
 Publishing............. no

 App • Using quasar.config.ts in "ts" format
 App •  WAIT  • Compiling of SPA UI with Vite in progress...
✗ Build failed in 368ms
[vite:css] [sass] [sass] Embedded Dart Sass couldn't find the embedded compiler executable. Please make sure the optional dependency sass-embedded-freebsd-x64 is installed in node_modules.
file: /home/wmorgan/vue/quasar-project/node_modules/quasar/dist/quasar.sass
    at /home/wmorgan/vue/quasar-project/node_modules/sass-embedded/dist/lib/src/compiler-path.js:58:11
    at Object.<anonymous> (/home/wmorgan/vue/quasar-project/node_modules/sass-embedded/dist/lib/src/compiler-path.js:62:3)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (node:internal/modules/helpers:136:16) {
  id: '/home/wmorgan/vue/quasar-project/node_modules/quasar/dist/quasar.sass',
  frame: undefined,
  code: 'PLUGIN_ERROR',
  plugin: 'vite:css',
  hook: 'transform',
  watchFiles: [
    '/home/wmorgan/vue/quasar-project/index.html',
    '/home/wmorgan/vue/quasar-project/.quasar/prod-spa/client-entry.js',
    '/home/wmorgan/vue/quasar-project/package.json',
    '/home/wmorgan/vue/quasar-project/node_modules/vue/dist/vue.runtime.esm-bundler.js',
    '/home/wmorgan/vue/quasar-project/node_modules/@quasar/extras/roboto-font/roboto-font.css',
    '/home/wmorgan/vue/quasar-project/node_modules/@quasar/extras/material-icons/material-icons.css',
    '/home/wmorgan/vue/quasar-project/src/css/app.scss',
    '/home/wmorgan/vue/quasar-project/.quasar/prod-spa/app.js',
    '/home/wmorgan/vue/quasar-project/.quasar/prod-spa/quasar-user-options.js',
    '/home/wmorgan/vue/quasar-project/node_modules/quasar/dist/quasar.sass'
  ]

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[rjgotten]

@wesnm
If you are using NPM, then configure NPM to not auto-install optional peer dependencies.
Add omit=optional to your .npmrc file.
Then uninstall and reinstall Vite, which will first remove Vite and its dependencies from your package lock file, and then will only add Vite back with the required dependencies. After that, manually install sass and don't install sass-embedded.

Sadly, NPM is a bit nuts and configuring optional dependencies to be omitted and then doing npm un sass-embedded when it's already installed, won't work. (Probably because the lock file still instructs that it's non-optional.)

Fair note of warning:
This will trigger npm/cli#4828 on architecture-specific rollup dependencies, which means you'll have another issue to deal with...

[wesnm]

In my specific case, these are all second-level dependencies coming in from another package (Quasar). It calls out sass-embedded as a dev dependency, so I don't think ignoring optional dependencies would work. So Quasar installs sass-embedded as a dev dependency, which then vite picks up on and favors over sass. Is it possible for a package to dynamically change it's dev dependencies based on the platform, or have platform-specific dependencies? I could not figure out how to use a package override to completely replace one package with another.

The existence of these two sass packages will create headaches for anyone developing on an unsupported platform unless every consumer checks that sass-embedded works. I can see everyone legitimately saying it's a different package's problem.

[rjgotten]

Is it possible for a package to dynamically change it's dev dependencies based on the platform, or have platform-specific dependencies? I could not figure out how to use a package override to completely replace one package with another.

Yes. It's possible, but not dynamically in the sense of at the level of the dependent package.
Declaring the supported platforms is managed at the level of the dependency package itself.
Which means you also can't override anything about how the dependency is registered with the dependent, to make it vary by platform, where those instructions are absent or misconfigured.

See also npm/rfcs#120 which was meant to tackle this problem.
(Specifically by introducing platformDependencies.)