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

Vite 6: module.ssrModule is empty for styles modules during SSR in development #19205

Closed
7 tasks done
fallemand opened this issue Jan 14, 2025 · 5 comments
Closed
7 tasks done

Vite 6: module.ssrModule is empty for styles modules during SSR in development #19205

fallemand opened this issue Jan 14, 2025 · 5 comments
Labels
pending triage

Comments

@fallemand
Copy link
Contributor

fallemand commented Jan 14, 2025 •
edited
Loading

Describe the bug

With Vite 5, we were able to inject in the SSR response the styles in the <head> by using the module graph.

const matchedComponent = ...;
const modules = vite.moduleGraph.getModulesByFile(matchedComponent);
modules.forEach((mod) => {
  if (mod.file?.endsWith(".scss") || mod.file?.endsWith(".css") || mod.id?.includes("vue&type=style")) {
    VITE 5: mod.ssrModule.default; // COMPILED CSS of the module
    VITE 6: mod.ssrModule  // is an empty object {}
  }
});

How can I get the mod.ssrModule to be loaded in Vite 6?

Reproduction

Vite 6:
https://stackblitz.com/edit/github-nevztk-b3pqix6j?file=src%2Fentry-server.ts

Processing module: /home/projects/github-nevztk-swmbdpcw/src/pages/Home.vue?vue&type=style&index=0&lang.css
Style Module ssrModule [Module: null prototype] {  }

Vite 5:
https://stackblitz.com/edit/github-nevztk-swmbdpcw?file=package.json

Processing module: /home/projects/github-nevztk-swmbdpcw/src/pages/Home.vue?vue&type=style&index=0&lang.css
Style Module ssrModule {
  default: '\n.red {\n  color: red;\n}\n',
  [Symbol(Symbol.toStringTag)]: 'Module'
}

Steps to reproduce

npm i & npm run dev

In the node console you'll see the output of the mod.ssrModule for a style module, and a normal module.
In the case of the style it's an empty object.

System Info

-

Used Package Manager

pnpm

Logs

No response

Validations
@fallemand fallemand changed the title Vite 6: Get SCSS compile code during SSR in development Vite 6: module.ssrModule is empty during SSR in development Jan 14, 2025
@fallemand fallemand changed the title Vite 6: module.ssrModule is empty during SSR in development Vite 6: module.ssrModule is empty for styles modules during SSR in development Jan 14, 2025
@github-actions GitHub Actions
Copy link

Hello @fallemand. 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.

@fallemand
Copy link
Contributor Author

fallemand commented Jan 15, 2025 •
edited
Loading

@bluwy, added a reproduction.

@sapphi-red
Copy link
Member

This is an intended breaking change:

https://vite.dev/guide/migration.html#advanced:~:text=%5B%2317922%5D%20fix(css,is%20now%20removed.

@fallemand
Copy link
Contributor Author

Is there a way to get the CSS content of a module in dev SSR?

@fallemand
Copy link
Contributor Author

fallemand commented Jan 16, 2025 •
edited
Loading

I was able to get the CSS content in SSR Dev with vite.ssrLoadModule(url), using the module url with ?inline

const injectQuery = (url: string, query: string) =>
  url.includes("?") ? url.replace("?", `?${query}&`) : `${url}?${query}`;

const cssContent = await vite.ssrLoadModule(injectQuery(moduleUrl, "inline"));

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

No branches or pull requests
4 participants
@hi-ogawa @fallemand @bluwy @sapphi-red