Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
cod1r opened this issue Dec 23, 2024 · 15 comments · May be fixed by #19053
Open

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

cod1r opened this issue Dec 23, 2024 · 15 comments · May be fixed by #19053
Labels
needs reproduction

Comments

@cod1r
Copy link

cod1r commented Dec 23, 2024 •
edited
Loading

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.
@cod1r cod1r linked a pull request Dec 23, 2024 that will close this issue
Open
@sonofmagic
Copy link

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
Copy link
Member

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

@cod1r
Copy link
Author

cod1r commented Dec 24, 2024

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
Copy link
Member

@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
Copy link
Author

cod1r commented Dec 24, 2024

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

@cod1r
Copy link
Author

cod1r commented Dec 24, 2024

oh im an idiot. the link is not react lmao

@cod1r
Copy link
Author

cod1r commented Dec 24, 2024

gimme one sec

@cod1r
Copy link
Author

cod1r commented Dec 24, 2024

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
Copy link
Member

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

@cod1r
Copy link
Author

cod1r commented Dec 24, 2024

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

@cod1r
Copy link
Author

cod1r commented Dec 24, 2024

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

@sapphi-red
Copy link
Member

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 GitHub Actions
Copy link

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
Copy link
Author

cod1r commented Dec 26, 2024

👀

@offbeatful
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs reproduction
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(css): avoid using default export from sass-embedded cod1r/vite
4 participants
@offbeatful @sonofmagic @sapphi-red @cod1r