search

07akioni / nuxtjs-naive-ui

The official nuxt module for naive-ui that supports Nuxt.js SSR.
MIT License
15 stars 1 forks source link

<style> tags are not generated in SSR since Nuxt 3.12 #4

Open Tsuyoshi84 opened 1 week ago

Tsuyoshi84 commented 1 week ago

Environment

Reproduction

https://stackblitz.com/edit/nuxt-starter-acsk7s?file=app.vue

Describe the bug

Since Nuxt 3.12, it seems like the <script> tags in the <head> are not generated correctly in SSR. Because of that, the page style initially loaded is broken. (After the hydration step, it will be fixed since the script tags are injected)

I assume the following change affected this module's process as it removed ssrContext.styles, which is leveraged by this module during SSR.

https://github.com/nuxt/nuxt/commit/2d1ab61b2ede074dc71b0cd89ce314f9c6075fef

monsterkai233 commented 4 days ago

you can add a plugin

import { setup } from '@css-render/vue3-ssr'
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(nuxtApp => {
  if (import.meta.server) {
    const { collect } = setup(nuxtApp.vueApp)
    nuxtApp.ssrContext!.head.push({
      style: () =>
        collect()
          .split('</style>')
          .map(block => {
            const id = block.match(/cssr-id="(.+?)"/)?.[1]
            const style = (block.match(/>(.*)/s)?.[1] || '').trim()
            return {
              ['cssr-id']: id,
              innerHTML: style
            }
          })
    })
  }
})