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

SSR in dev for more consistent output in dev and prod #4045

Open
4 tasks done
zyyv opened this issue Jul 15, 2024 · 5 comments
Open
4 tasks done

SSR in dev for more consistent output in dev and prod #4045

zyyv opened this issue Jul 15, 2024 · 5 comments
Labels
build Related to the build system enhancement New feature or request has-workaround Has workaround, low priority stale

Comments

@zyyv
Copy link
Contributor

zyyv commented Jul 15, 2024 •
edited
Loading

Describe the bug

Usage:

features:
  - icon: <i class="i-carbon-sun" />
    title: Feature A
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Check the feature icon type

type FeatureIcon =
  | string
  | { src: string; alt?: string; width?: string; height: string }
  | {
      light: string
      dark: string
      alt?: string
      width?: string
      height: string
    }

I refer to the render logic, use v-html render the icon.
Display well in dev environment, but shows errors in prod environment.

dev build
dev build

Reproduction

https://stackblitz.com/github/zyyv/vitepress-unocss-issue

  • Display right run pnpm dev
  • Display error run pnpm build && pnpm preview

Expected behavior

Dev and build behave the same

System Info

latest

Additional context

No response

Validations
@zyyv zyyv added the bug: pending triage Maybe a bug, waiting for confirmation label Jul 15, 2024
@brc-dd
Copy link
Member

brc-dd commented Jul 15, 2024

<i> is not a self closing tag. make it <i class="i-carbon-sun"></i> it should work.

@brc-dd
Copy link
Member

brc-dd commented Jul 15, 2024 •
edited
Loading

Vue doesn't allow/rectify invalid HTML in SSR:

https://play.vuejs.org/#__PROD____SSR__eNp9UtFOgzAU/ZWmz8q2TF QLVGzB31Qoz42cVDuoFuhTVsYZNm/ewthkrnsrT3n3MO5hx7oo9ZBXQENaWS5EdoRC67SS1ZyVVpHGrIg60gQLmNrF4xulGKUTJbrQdCeCZLYDIJo0luiGV4cFFrGDvBGSJSKmtS3uSskzjSMLqMJQhe4dsRFk5EJXq1rpT8GmIoc/GwS811mVFWmITGQPnhsL1KXh2Q2neqmA3IQWe7GSCos2rYhSaTiO4SO3j/AXf7bJrKCse/9ue0JuOSKnXSh6Q11FhvciCzYWlXiD i xChXhRYSzLt2AhtmNOwzeC6WUu1fO8yZCm4GnOfAdxfwrcVqQzx8GLBgamD0xLnYZOB6evX1Bg2eT2Sh0kqi gr5CVbJymfsZU/YDsYe6bq0L4VWxoky 7arxkFph6V8UK88dnpG8RU X1n9L 48uOvmsE9s8acG4z2xQCSC YwefwFPfe8q

image

VitePress won't be able to help with SSR inconsistencies unless we start doing SSR in dev.

@brc-dd brc-dd added enhancement New feature or request build Related to the build system has-workaround Has workaround, low priority and removed bug: pending triage Maybe a bug, waiting for confirmation labels Jul 15, 2024
@brc-dd brc-dd changed the title [Bug] Use html tag in Feature Icon, showing errors in production SSR in dev for more consistent output in dev and prod Jul 15, 2024
@zyyv
Copy link
Contributor Author

zyyv commented Jul 15, 2024

Thank you @brc-dd .

@zyyv zyyv closed this as not planned Won't fix, can't repro, duplicate, stale Jul 15, 2024
@brc-dd
Copy link
Member

brc-dd commented Jul 15, 2024

I'm fine with keeping this open though. There should be consistency for better DX. SSR in dev is possible - Nuxt is doing that. Someone with better insights might be able to introduce that here too.

@brc-dd brc-dd reopened this Jul 15, 2024
@ghost
Copy link

ghost commented Jul 17, 2024

I don't have a solution, but I have some ideas for you.

Probably time will tell that in the future, a better approach for SSR in VitePress is going to be a closer integration with Vite. Already released in Vite 5.3 and coming up in a greater form in Vite 6 is the Environment API, that enables every plugin or app that builds on top of Vite to work together in Vite's SSR pipeline, it is very good.
Currently VitePress uses the Vue's SSR, this is also good, but it is more limited in scope and you guys are needing to solve these consistencies issues, that are more or less the same issues that Vite 6 is also addressing.

@github-actions github-actions bot added the stale label Sep 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
build Related to the build system enhancement New feature or request has-workaround Has workaround, low priority stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brc-dd @zyyv