Disabled SWC as replacement for Babel because of custom Babel configuration in Next.js 14

Question

I'm working on a Next.js 14 project and when I run npm run dev, I get the following error:

npm run dev

> [email protected] dev
> next dev

 ⚠ Port 3000 is in use, trying 3001 instead.
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3001

 ⚠ Invalid next.config.mjs options detected: 
 ⚠     Unrecognized key(s) in object: 'optimizeFonts' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
   Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
 ✓ Ready in 1350ms
   Using external babel configuration from /Users/(omission)/Documents/Personal/React/my-portfolio/.babelrc
 ⚠ It looks like there is a custom Babel configuration that can be removed.
 ○ Compiling /not-found ...
 ⨯ ./src/app/layout.tsx:2:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
 ⨯ ./src/app/layout.tsx:2:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
 ✓ Compiled / in 80ms (417 modules)
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

This error seems to be caused by some conflict between SWC's "next/font" settings and my custom Babel configuration. My project is still using Babel because I want to use Jest to test my Next.js components.

I initially set up my project following the instructions on this website(in Japanese), which included setting up a custom Babel configuration.

instructions on the website

1. Install the necessary modules (Assuming a Next.js project has already been created)

npm i -D jest @testing-library/react @types/jest @testing-library/jest-dom @testing-library/dom babel-jest @testing-library/user-event jest-css-modules

2. Configure the .babelrc file

{
    "presets": ["next/babel"]
}

3. Add Jest configuration to package.json

"jest": {
    "testPathIgnorePatterns": [
        "<rootDir>/.next/",         // Exclude from tests
        "<rootDir>/node_modules/"
    ],
    "moduleNameMapper": {          // Mock CSS files using jest-css-modules
        "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
    }
}

4. Add a test script to package.json

"scripts": {
    ...
    "test": "jest --env=jsdom --verbose"  // Add this
},

My test script:

import "@testing-library/jest-dom/";
import { render, screen } from "@testing-library/react";
import Page from "../src/app/page";

// testing the page component

test("renders the page", () => {
  render(<Page />);
  expect(screen.getByText(/Get started by editing/)).toBeInTheDocument();
});

My project structure:

What I've tried:

- Disable the font optimization feature: I've disabled the font optimization feature in my next.config.mjs file with the following code, but the same error showed up when I went to my local host.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizeFonts: false,
  },
};

export default nextConfig;

Environment:

• Node.js version: v18.17.0
• Next.js version: 14.1.0
• TypeScript version: 5.3.3
• OS: macOS Monterey version 12.6.7

Is there a way to solve this problem?
Or is there any other way to use Jest in my project?
Any advice would be appreciated.

Answer 1

Using Babel along side SWC

If you want to use SWC despite the presence of a .babelrc file you can force it in your next.config.js file.

SWC disabled | Next.js docs

This will make sure you don't have to disable font optimization or any of SWC's other other features.

Replace Babel

I would not recommend using Babel if the only reason is to keep Jest working. You can use SWC with Jest. Simply add the follwing to your jest.config.js file:

const nextJest = require('next/jest')
 
/** @type {import('jest').Config} */
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
const config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(config)

See Testing: Jest | Next.js docs.

Use Vitest over Jest

This personally is what I would do. See the Vitest comparison to understand it's advantages. Vitest is a drop in Jest replacement too. See this article for how to do so.