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

Using the swr package breaks CSS injection in UMD #13668

Closed
7 tasks done
binary-koan opened this issue Jun 29, 2023 · 1 comment · Fixed by #13669
Closed
7 tasks done

Using the swr package breaks CSS injection in UMD #13668

binary-koan opened this issue Jun 29, 2023 · 1 comment · Fixed by #13669

Comments

@binary-koan
Copy link
Contributor

binary-koan commented Jun 29, 2023

Describe the bug

I'm attempting to use the swr package in a Vite app, which is being built as UMD and embedded into another site.

I expect this to just work, but adding swr causes the CSS not to be included correctly in the UMD bundle. This means when the app is embedded the CSS isn't loaded and everything appears unstyled.

Reproduction

https://stackblitz.com/edit/vitejs-vite-px4o6w

Steps to reproduce

Since this is a problem in the UMD build, you can reproduce with:

npm run build
npm run serve

The default template CSS is still being imported, but is not activated so the page appears unstyled. If you comment out the SWR import then the CSS works correctly.

(index.html adjusted to load the UMD build instead of being the Vite entry point)

This seems to be because Vite is looking for the string execute: to insert the CSS after it. For UMD this is normally not found so the CSS is injected at the top, but since SWR happens to have this string in a comment in the middle of the library the CSS gets injected inside this function instead - meaning it isn't executed when the page loads.

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 80.53 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    Watchman: 2023.05.08.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 114.0.1823.58
    Firefox: 113.0.2
    Safari: 16.4

Used Package Manager

yarn

Logs

No response

Validations

@stackblitz
Copy link

stackblitz bot commented Jun 29, 2023

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant