sass dynamic import is undefined when building with "modern-compiler" and sass-embedded

[cod1r]

Describe the bug

I expect to do builds without any crashes relating to "sass" being an undefined import.

The actual behavior is that in css.ts, the dynamic import is expecting properties to be on the default export but instead properties are exported individually (named exports w/e you want to call it).

Reproduction

stackblitz link wasn't working out. had a different sass-embedded error lmao

just have sass files and try importing them and then doing a vite build with sass-embedded. the sass-embedded dynamic import will try to grab a default export but sass embedded doesn't have one

Steps to reproduce

1. import sass file
2. run vite build

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M2
    Memory: 1.10 GB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.3.0 - ~/.local/state/fnm_multishells/60516_1734950576395/bin/node
    Yarn: 4.5.3 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - ~/.local/state/fnm_multishells/60516_1734950576395/bin/npm
    bun: 1.1.42 - /opt/homebrew/bin/bun
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.205
    Firefox Nightly: 134.0a1
    Safari: 18.1.1
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.3
    rollup: ^4.21.2 => 4.27.3
    vite: ^6.0.5 => 6.0.5

Used Package Manager

yarn

Logs

      compilerPromise ??= sass.initAsyncCompiler();
                               ^


[vite:css] [sass] Cannot read properties of undefined (reading 'initAsyncCompiler')
file: /Users/cod1r/workspace/repositories/games/spelltower/spelltower.scss```

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vite.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] 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](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vite.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[sonofmagic]

I have encountered the same problem:

[vite:css] [sass] Cannot read properties of undefined (reading 'initAsyncCompiler')
file: /GitHub/weapp-vite/apps/vite-native/app.scss
node:internal/process/promises:392
      new UnhandledPromiseRejection(reason);
      ^

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".
    at throwUnhandledRejectionsMode (node:internal/process/promises:392:7)
    at processPromiseRejections (node:internal/process/promises:475:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:106:32) {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v22.12.0

Reproduction

https://github.com/weapp-vite/weapp-vite/tree/main/apps/vite-native

Steps to reproduce

1. pnpm i
2. pnpm up -rLi (upgrade vite from 5 -> 6.0.5)
3. pnpm dev

Used Package Manager

pnpm

System Info

  System:
    OS: macOS 15.2
    CPU: (14) arm64 Apple M4 Pro
    Memory: 97.59 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.12.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 9.15.1 - ~/.nvm/versions/node/v22.12.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 18.2
  npmPackages:
    @vitejs/plugin-legacy: ^6.0.0 => 6.0.0 
    rollup: ^4.29.1 => 4.29.1 

[sapphi-red]

@cod1r It doesn't reproduce on my machine. Are you using some loaders like tsx or ts-node?

[cod1r]

i think you need to have sass-embedded installed which causes it to pass a different path to makeModernSassFunction or whatever it's called

[sapphi-red]

@cod1r Your reproduction contains sass-embedded so it should be installed. The steps I did is:

1. Download your reproduction
2. Run npm i
3. Run npm run build

Are you using other runtimes than Node? e.g. Deno, Bun

[cod1r]

no. i just imported a sass file and did a vite build or w/e

[cod1r]

oh im an idiot. the link is not react lmao

[cod1r]

gimme one sec

[cod1r]

ok, the stackblitz thing is weird. but basically just have sass, sass-embedded, and try to build with those packages locally. probably will error due to above problem

[sapphi-red]

@cod1r would you make a GitHub repo that reproduces the error?

[cod1r]

i can ye. just gotta get day20 aoc. gimme some time

[cod1r]

seems like @ hi-ogawa had some reproducible repos linked in the PR i made

[sapphi-red]

I don't think hi-ogawa's reproduction is the one that reproduces the Cannot read properties of undefined (reading 'initAsyncCompiler') error. It's a reproduction that clarifies the problem with your PR.

[github-actions]

Hello @cod1r. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[cod1r]

👀

[offbeatful]

Not a reproduction, but it seems sass-embedded exports mjs file which is being used instead of default cjs.
I am experiencing the same issue. (It may be due to the fact that I am using tsx or nodejs 22)

[cod1r]

ok this is a problem with tsx lmao

[cod1r]

This issue probably should be closed. If I just don't use tsx or ts-node, then the build works fine. Sucks that now I have to switch my build script to javascript but whatever.

[bkilrain]

I'm encountering the same issue after updating my vite config to use the below snippet. @cod1r In your investigation, did you bother trying to figure out how TSX is causing the issue? TSX is super convenient and I think I'd rather stick with the legacy sass api for now than switch off. If you have any info, I'd be glad to include it in a TSX bug report.

css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      },
    },
  },

[cod1r]

I'm not sure if it's a bug, but tsx resolves imports differently than modern node versions. When vite tries to import sass/sass-embedded, it's expecting an object with a 'default' key, but there is none when using tsx, which is why sass ends up being undefined. I think it might have something to do with tsx doing something weird with dynamic imports, but I'm not sure.

Another solution might be to use another runtime like deno/bun to run typescript scripts instead of using tsx/ts-node.

[hnryjms]

While yes, this is a TSX or TypeScript-itself issue, this kinda blocks SSR apps in ESM. For dev servers, the Vite SSR Guide uses a Vite middleware on your backend app... of which, if you're using TypeScript ESM; won't work.

And the workaround is pretty simple...

https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L2483-L2485

^ these lines could just become:

      const sassImport = await import(pathToFileURL(sassPath).href);
      const sass: typeof Sass = sassImport.default ?? sassImport; // workaround from #19052
      compilerPromise ??= sass.initAsyncCompiler()

Then a backend using TSX could still run the Vite dev server with modern-compiler. Otherwise, we're kinda just waiting for a resolution on privatenumber/tsx#442 ... which seems kinda low-priority to the TSX team, or might even be a TypeScript design decision.

[sapphi-red]

I'm fine with having a workaround merged in Vite. We just need a reproduction so that we can understand why that workaround is needed and we don't break it accidently in future.

[hnryjms]

I’m new to Vite [this is my first project using it, coming from the Webpack/CJS world], so if anyone reading this wants to implement that change and write the test for it… go ahead. I’m happy to help out or provide an example/reproduce repo.

Otherwise might be a while before I get to it 🙃