mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 15:15:19 +00:00
fix(vite): don't skip loading styles in hydration phase (#18433)
This commit is contained in:
parent
ea9812a559
commit
0236a799f2
@ -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')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 }
|
||||||
|
Loading…
Reference in New Issue
Block a user