Font loader with babel error (vercel#41151)

Adds build error when using font loaders with babel. Otherwise you'll
get other unrelated errors.

## 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>

errors/babel-font-loader-conflict.md

@@ -0,0 +1,14 @@
+# Babel and Font loader conflict
+
+#### Why This Error Occurred
+
+You have tried to use `experimental.fontLoaders` with a custom babel config. When your application has a custom babel config you opt-out of the Next.js Compiler which is required to use `experimental.fontLoaders`.
+
+#### Possible Ways to Fix It
+
+- Remove your custom babel config and use the Next.js Compiler
+
+### Useful Links
+
+- [Next.js Compiler](https://nextjs.org/docs/advanced-features/compiler)
+- [Customizing Babel Config](https://nextjs.org/docs/advanced-features/customizing-babel-config)

errors/manifest.json

@@ -737,6 +737,10 @@
         {
           "title": "nonce-contained-invalid-characters",
           "path": "/errors/nonce-contained-invalid-characters.md"
+        },
+        {
+          "title": "babel-font-loader-conflict",
+          "path": "/errors/babel-font-loader-conflict.md"
         }
       ]
     }

packages/next/build/webpack-config.ts

@@ -646,6 +646,16 @@ export default async function getBaseWebpackConfig(
     loggedIgnoredCompilerOptions = true
   }
 
+  if (babelConfigFile && config.experimental.fontLoaders) {
+    Log.error(
+      `"experimental.fontLoaders" is enabled which requires SWC although Babel is being used due to custom babel config being present "${path.relative(
+        dir,
+        babelConfigFile
+      )}".\nSee more info here: https://nextjs.org/docs/messages/babel-font-loader-conflict`
+    )
+    process.exit(1)
+  }
+
   const getBabelLoader = () => {
     return {
       loader: require.resolve('./babel/loader/index'),

test/e2e/next-font/babel.test.ts

@@ -0,0 +1,33 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { join } from 'path'
+
+describe('@next/font/google babel', () => {
+  const isNextStart = (global as any).isNextStart
+  let next: NextInstance
+
+  if (!isNextStart) {
+    it('should only run on next start', () => {})
+    return
+  }
+
+  beforeAll(async () => {
+    next = await createNext({
+      skipStart: true,
+      files: new FileRef(join(__dirname, 'babel')),
+      dependencies: {
+        '@next/font': 'canary',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  test('Build error when using babel', async () => {
+    await expect(next.start()).rejects.toThrow(
+      'next build failed with code/signal 1'
+    )
+    expect(next.cliOutput).toMatch(
+      /"experimental.fontLoaders" is enabled which requires SWC although Babel is being used due to custom babel config being present ".babelrc"./
+    )
+  })
+})

test/e2e/next-font/babel/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}

test/e2e/next-font/babel/pages/index.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>Hello world</p>
+}

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

@@ -5,8 +5,14 @@ import webdriver from 'next-webdriver'
 import { join } from 'path'
 
 describe('font-loader-in-document-error', () => {
+  const isDev = (global as any).isNextDev
   let next: NextInstance
 
+  if (!isDev) {
+    it('should only run on next dev', () => {})
+    return
+  }
+
   beforeAll(async () => {
     next = await createNext({
       files: {

test/e2e/next-font/font-loader-in-document/next.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  experimental: {
+    fontLoaders: {
+      '@next/font/google': {
+        subsets: ['latin'],
+      },
+    },
+  },
+}