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.

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

Inlined CSS is not working in SSR after 2.9 release #7913

Closed
7 tasks done
saurabhdaware opened this issue Apr 26, 2022 · 3 comments · Fixed by #7869
Closed
7 tasks done

Inlined CSS is not working in SSR after 2.9 release #7913

saurabhdaware opened this issue Apr 26, 2022 · 3 comments · Fixed by #7869
Labels
feat: css feat: ssr p2-edge-case Bug, but has workaround or limited in scope (priority) regression The issue only appears after a new release

Comments

@saurabhdaware
Copy link
Contributor

saurabhdaware commented Apr 26, 2022

Describe the bug

I have a setup where I write inlined CSS in index.html file. I expect this inlined CSS to work as it is in dev-server and it did work before 2.9 however after 2.9 the inlined CSS turns into something like this in the source -

<script type="module" src="/?html-proxy&amp;index=0.css"></script>

Apparently, it is happening during vite.transformIndexHtml API. It returns new HTML with proxy script instead of actual inlined css. Due to this the CSS is not applied during the dev-server.

script type=module src=/?html-proxy&index=0.css

The build continues to work fine.

Reproduction

https://stackblitz.com/edit/github-12zodn-vbxsug?file=index.html&terminal=dev

Exactly same example on Vite 2.8.6 - https://stackblitz.com/edit/github-12zodn-34x7n1?file=package.json&terminal=dev (works as expected)

System Info

System:
    OS: macOS 11.4
    CPU: (8) x64 Apple M1
    Memory: 520.12 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.5.0 - ~/.nvm/versions/node/v16.5.0/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v16.5.0/bin/npm
  Browsers:
    Brave Browser: 97.1.34.80
    Chrome: 100.0.4896.127
    Safari: 14.1.1

Used Package Manager

npm

Logs

/?html-proxy&index=0.css:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Validations

@saurabhdaware saurabhdaware changed the title Inlined CSS is not working in SSR after 2.9 Inlined CSS is not working in SSR after 2.9 release Apr 26, 2022
@poyoho poyoho assigned poyoho and unassigned poyoho Apr 26, 2022
@poyoho
Copy link
Member

poyoho commented Apr 26, 2022

Thank you very much for your work to solve this issues. after my PR will return actual inlined css. But I use you repo can not find the issues what you said, can you help me to test it ?

@saurabhdaware
Copy link
Contributor Author

Thank you very much for your work to solve this issues. after my PR will return actual inlined css. But I use you repo can not find the issues what you said, can you help me to test it ?

So I pulled your branch locally and tested out the changes there. They are working as expected. Your PR will resolve this issue 🕺🏼

@saurabhdaware
Copy link
Contributor Author

Also created this github repo if you want to replicate it on your end https://github.com/saurabhdaware/vite-290-inlined-css-bug-replication

Added how to replicate in README

@sapphi-red sapphi-red added feat: ssr p2-edge-case Bug, but has workaround or limited in scope (priority) regression The issue only appears after a new release and removed pending triage labels Apr 28, 2022
@github-actions github-actions bot locked and limited conversation to collaborators May 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: css feat: ssr p2-edge-case Bug, but has workaround or limited in scope (priority) regression The issue only appears after a new release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants