From e5be49eec1e88db63d2a9712e56adad6a80e2891 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Thu, 6 Oct 2022 07:14:31 +0200 Subject: [PATCH] Font loader with babel error (#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 --- errors/babel-font-loader-conflict.md | 14 ++++++++ errors/manifest.json | 4 +++ packages/next/build/webpack-config.ts | 10 ++++++ test/e2e/next-font/babel.test.ts | 33 +++++++++++++++++++ test/e2e/next-font/babel/.babelrc | 4 +++ .../next-font/babel}/next.config.js | 0 test/e2e/next-font/babel/pages/index.js | 3 ++ .../font-loader-in-document-error.test.ts | 6 ++++ .../font-loader-in-document/next.config.js | 9 +++++ .../pages/_document.js | 0 .../font-loader-in-document/pages/index.js | 0 11 files changed, 83 insertions(+) create mode 100644 errors/babel-font-loader-conflict.md create mode 100644 test/e2e/next-font/babel.test.ts create mode 100644 test/e2e/next-font/babel/.babelrc rename test/{development/next-font/font-loader-in-document => e2e/next-font/babel}/next.config.js (100%) create mode 100644 test/e2e/next-font/babel/pages/index.js rename test/{development => e2e}/next-font/font-loader-in-document-error.test.ts (89%) create mode 100644 test/e2e/next-font/font-loader-in-document/next.config.js rename test/{development => e2e}/next-font/font-loader-in-document/pages/_document.js (100%) rename test/{development => e2e}/next-font/font-loader-in-document/pages/index.js (100%) diff --git a/errors/babel-font-loader-conflict.md b/errors/babel-font-loader-conflict.md new file mode 100644 index 0000000000000..6999883ddcda4 --- /dev/null +++ b/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) diff --git a/errors/manifest.json b/errors/manifest.json index 41bb35c7d6004..79a55d1d71831 100644 --- a/errors/manifest.json +++ b/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" } ] } diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 34e326b0bf485..8a07941359b4e 100644 --- a/packages/next/build/webpack-config.ts +++ b/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'), diff --git a/test/e2e/next-font/babel.test.ts b/test/e2e/next-font/babel.test.ts new file mode 100644 index 0000000000000..d5ff9d6511ce2 --- /dev/null +++ b/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"./ + ) + }) +}) diff --git a/test/e2e/next-font/babel/.babelrc b/test/e2e/next-font/babel/.babelrc new file mode 100644 index 0000000000000..9fcef0394fdf0 --- /dev/null +++ b/test/e2e/next-font/babel/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["next/babel"], + "plugins": [] +} diff --git a/test/development/next-font/font-loader-in-document/next.config.js b/test/e2e/next-font/babel/next.config.js similarity index 100% rename from test/development/next-font/font-loader-in-document/next.config.js rename to test/e2e/next-font/babel/next.config.js diff --git a/test/e2e/next-font/babel/pages/index.js b/test/e2e/next-font/babel/pages/index.js new file mode 100644 index 0000000000000..a681aa7ce257c --- /dev/null +++ b/test/e2e/next-font/babel/pages/index.js @@ -0,0 +1,3 @@ +export default function Page() { + return

Hello world

+} diff --git a/test/development/next-font/font-loader-in-document-error.test.ts b/test/e2e/next-font/font-loader-in-document-error.test.ts similarity index 89% rename from test/development/next-font/font-loader-in-document-error.test.ts rename to test/e2e/next-font/font-loader-in-document-error.test.ts index 403da95bd1d58..1c15392daa1a0 100644 --- a/test/development/next-font/font-loader-in-document-error.test.ts +++ b/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: { diff --git a/test/e2e/next-font/font-loader-in-document/next.config.js b/test/e2e/next-font/font-loader-in-document/next.config.js new file mode 100644 index 0000000000000..6cd855478a746 --- /dev/null +++ b/test/e2e/next-font/font-loader-in-document/next.config.js @@ -0,0 +1,9 @@ +module.exports = { + experimental: { + fontLoaders: { + '@next/font/google': { + subsets: ['latin'], + }, + }, + }, +} diff --git a/test/development/next-font/font-loader-in-document/pages/_document.js b/test/e2e/next-font/font-loader-in-document/pages/_document.js similarity index 100% rename from test/development/next-font/font-loader-in-document/pages/_document.js rename to test/e2e/next-font/font-loader-in-document/pages/_document.js diff --git a/test/development/next-font/font-loader-in-document/pages/index.js b/test/e2e/next-font/font-loader-in-document/pages/index.js similarity index 100% rename from test/development/next-font/font-loader-in-document/pages/index.js rename to test/e2e/next-font/font-loader-in-document/pages/index.js