Recover from font loader error in dev (#41251)

Check that the module has assets. This might not always be the case in
app dev if there was an error. Test added to make sure it recovers
correctly.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: JJ Kasper <jj@jjsweb.site>

packages/next/build/webpack/plugins/font-loader-manifest-plugin.ts

@@ -54,6 +54,7 @@ export class FontLoaderManifestPlugin {
 
           if (this.appDirEnabled) {
             for (const mod of fontLoaderModules) {
+              if (!mod.buildInfo?.assets) continue
               const modAssets = Object.keys(mod.buildInfo.assets)
               const fontFiles: string[] = modAssets.filter((file: string) =>
                 /\.(woff|woff2|eot|ttf|otf)$/.test(file)

test/e2e/app-dir/next-font.test.ts

@@ -1,12 +1,13 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { renderViaHTTP } from 'next-test-utils'
+import { getRedboxSource, hasRedbox, renderViaHTTP } from 'next-test-utils'
 import cheerio from 'cheerio'
 import path from 'path'
 import webdriver from 'next-webdriver'
 
 describe('app dir next-font', () => {
-  if ((global as any).isNextDeploy || (global as any).isNextDev) {
+  const isDev = (global as any).isNextDev
+  if ((global as any).isNextDeploy) {
     it('should skip next deploy for now', () => {})
     return
   }
@@ -296,4 +297,27 @@ describe('app dir next-font', () => {
       })
     })
   })
+
+  if (isDev) {
+    describe('Dev errors', () => {
+      it('should recover on font loader error', async () => {
+        const browser = await webdriver(next.url, '/')
+        const font1Content = await next.readFile('fonts/font1.js')
+
+        // Break file
+        await next.patchFile(
+          'fonts/font1.js',
+          font1Content.replace('./font1.woff2', './does-not-exist.woff2')
+        )
+        expect(await hasRedbox(browser, true)).toBeTrue()
+        expect(await getRedboxSource(browser)).toInclude(
+          "Can't resolve './does-not-exist.woff2'"
+        )
+
+        // Fix file
+        await next.patchFile('fonts/font1.js', font1Content)
+        await browser.waitForElementByCss('#root-page')
+      })
+    })
+  }
 })

test/e2e/app-dir/next-font/app/page.js

@@ -1,9 +1,11 @@
 import Comp from './Comp'
+import font1 from '../fonts/font1'
 import font2 from '../fonts/font2'
 
 export default function HomePage() {
   return (
     <>
+      <p className={font1.className}>Hello world</p>
       <p id="root-page" className={font2.className}>
         {JSON.stringify(font2)}
       </p>
@@ -11,3 +13,5 @@ export default function HomePage() {
     </>
   )
 }
+
+export const config = { runtime: 'experimental-edge' }

test/e2e/next-font/font-loader-in-document-error.test.ts

@@ -1,6 +1,6 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { check, getRedboxSource } from 'next-test-utils'
+import { getRedboxSource, hasRedbox } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
 
@@ -30,7 +30,8 @@ describe('font-loader-in-document-error', () => {
 
   test('font loader inside _document', async () => {
     const browser = await webdriver(next.appPort, '/')
-    await check(() => getRedboxSource(browser), /Font loaders/)
+    expect(await hasRedbox(browser, true)).toBeTrue()
+    expect(await getRedboxSource(browser)).toMatch(/Font loaders/)
     expect(await getRedboxSource(browser)).toInclude(
       'Font loaders cannot be used within pages/_document.js'
     )