fix(dev): serve the loading page Nuxt would render, and stop it reloading itself

Author: danielroe

packages/nuxt-cli/src/dev/loading-template.ts

@@ -5,7 +5,7 @@ import { withNodePath } from '../utils/paths'
 
 exporttypeLoadingTemplate=(data: {loading?: string})=>string
 
-letcached: Promise<LoadingTemplate|undefined>|undefined
+constcache=newMap<string,Promise<LoadingTemplate|undefined>>()
 
 /**
  * The loading page Nuxt itself would render, read from the project's own
@@ -15,12 +15,18 @@ let cached: Promise<LoadingTemplate | undefined> | undefined
  * `devServer.loadingTemplate` with something unusable.
  */
 exportfunctionresolveDefaultLoadingTemplate(cwd: string): Promise<LoadingTemplate|undefined>{
-returncached??=importDefaultLoadingTemplate(cwd)
+lettemplate=cache.get(cwd)
+if(!template){
+template=importDefaultLoadingTemplate(cwd)
+cache.set(cwd,template)
+}
+returntemplate
 }
 
 asyncfunctionimportDefaultLoadingTemplate(cwd: string): Promise<LoadingTemplate|undefined>{
 try{
-constschemaPath=resolveModulePath('@nuxt/schema',{from: withNodePath(cwd),try: true})
+constnuxtPath=resolveModulePath('nuxt',{from: withNodePath(cwd),try: true})
+constschemaPath=resolveModulePath('@nuxt/schema',{from: withNodePath(nuxtPath||cwd),try: true})
 if(!schemaPath){
 return
 }

packages/nuxt-cli/src/dev/utils.ts

@@ -342,7 +342,8 @@ export class NuxtDevServer extends EventEmitter<DevServerEventMap> {
 res.setHeader('Cache-Control','no-store')
 res.setHeader('Refresh','3')
 
-if(!req.headers.accept?.includes('text/html')){
+constaccept=req.headers.accept
+if(accept&&!accept.includes('text/html')&&!accept.includes('*/*')){
 res.setHeader('Content-Type','application/json')
 res.end(JSON.stringify({
 error: true,

packages/nuxt-cli/test/e2e/dev-loading.spec.ts

@@ -91,4 +91,42 @@ describe('dev server loading screen', () => {
 vi.unstubAllEnvs()
 }
 })
+
+it('should answer the page\'s own readiness poll with the page, not json',{timeout: 90_000},async()=>{
+vi.stubEnv('NUXT_IGNORE_LOCK','1')
+
+consthost='127.0.0.1'
+constport=awaitgetPort({ host,port: 3087})
+constbase=`http://${host}:${port}`
+
+// `fetch(location.href)` from the loading page sends `accept: *\/*`. Answered
+// with json, the page cannot find its own marker, decides the app is up and
+// reloads, which loops for as long as the build takes.
+constpolled=newPromise<Response>((resolve)=>{
+constpoll=async()=>{
+constresponse=awaitfetch(base,{headers: {accept: '*/*'}}).catch(()=>undefined)
+if(!response||response.status!==503){
+setTimeout(poll,5)
+return
+}
+resolve(response)
+}
+voidpoll()
+})
+
+const{ close }=awaitinitialize({cwd: fixtureDir,args: {}},{
+listenOverrides: {hostname: host, port },
+showBanner: false,
+})
+
+try{
+constresponse=awaitpolled
+expect(response.headers.get('content-type')).toContain('text/html')
+expect(awaitresponse.text()).toContain('__NUXT_LOADING__')
+}
+finally{
+awaitclose()
+vi.unstubAllEnvs()
+}
+})
 })

packages/nuxt-cli/test/unit/loading-template.spec.ts

@@ -0,0 +1,13 @@
+import{fileURLToPath}from'node:url'
+import{describe,expect,it}from'vitest'
+import{resolveDefaultLoadingTemplate}from'../../src/dev/loading-template'
+
+describe('resolveDefaultLoadingTemplate',()=>{
+it('should reach `@nuxt/schema` through the project\'s own nuxt',async()=>{
+constcwd=fileURLToPath(newURL('../../../../playground',import.meta.url))
+consttemplate=awaitresolveDefaultLoadingTemplate(cwd)
+
+expect(template).toBeTypeOf('function')
+expect(template!({loading: 'Starting Nuxt...'})).toContain('nuxt-loader-bar')
+})
+})