fix(vite): don't skip loading styles in hydration phase (#18433)

This commit is contained in:
Daniel Roe 2023-01-21 23:15:48 +00:00 committed by GitHub
parent ea9812a559
commit 0236a799f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 16 deletions

View File

@ -143,8 +143,6 @@ export function createNuxtApp (options: CreateOptions) {
if (hydratingCount === 0) {
nuxtApp.isHydrating = false
// @ts-expect-error private flag
globalThis.__hydrated = true
return nuxtApp.callHook('app:suspense:resolve')
}
}

View File

@ -1,39 +1,28 @@
import type { IncomingMessage, ServerResponse } from 'node:http'
import { join, relative, resolve } from 'pathe'
import { join, resolve } from 'pathe'
import * as vite from 'vite'
import vuePlugin from '@vitejs/plugin-vue'
import viteJsxPlugin from '@vitejs/plugin-vue-jsx'
import type { ServerOptions } from 'vite'
import { logger } from '@nuxt/kit'
import { getPort } from 'get-port-please'
import { joinURL, withoutLeadingSlash, withoutTrailingSlash } from 'ufo'
import { joinURL, withoutLeadingSlash } from 'ufo'
import defu from 'defu'
import type { OutputOptions } from 'rollup'
import { defineEventHandler } from 'h3'
import { genString } from 'knitwork'
import { cacheDirPlugin } from './plugins/cache-dir'
import type { ViteBuildContext, ViteOptions } from './vite'
import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
import { viteNodePlugin } from './vite-node'
export async function buildClient (ctx: ViteBuildContext) {
const buildAssetsDir = withoutLeadingSlash(
withoutTrailingSlash(ctx.nuxt.options.app.buildAssetsDir)
)
const relativeToBuildAssetsDir = (filename: string) => './' + relative(buildAssetsDir, filename)
const clientConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
entry: ctx.entry,
base: ctx.nuxt.options.dev
? joinURL(ctx.nuxt.options.app.baseURL.replace(/^\.\//, '/') || '/', ctx.nuxt.options.app.buildAssetsDir)
: './',
experimental: {
renderBuiltUrl: (filename, { type, hostType, hostId }) => {
// When rendering inline styles, we can skip loading CSS chunk that matches the current page
if (ctx.nuxt.options.experimental.inlineSSRStyles && hostType === 'js' && filename.endsWith('.css')) {
return {
runtime: `!globalThis.__hydrated ? ${genString(relativeToBuildAssetsDir(hostId))} : ${genString(relativeToBuildAssetsDir(filename))}`
}
}
renderBuiltUrl: (filename, { type, hostType }) => {
if (hostType !== 'js' || type === 'asset') {
// In CSS we only use relative paths until we craft a clever runtime CSS hack
return { relative: true }