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) { if (hydratingCount === 0) {
nuxtApp.isHydrating = false nuxtApp.isHydrating = false
// @ts-expect-error private flag
globalThis.__hydrated = true
return nuxtApp.callHook('app:suspense:resolve') return nuxtApp.callHook('app:suspense:resolve')
} }
} }

View File

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