While working on my Next.js 14 project, I encountered an issue when running npm run dev. The error message I received is as follows:
npm run dev
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3226722f302d2b39303336301f6f716e716f">[email protected]</a> 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
The root cause of this error seems to be a conflict between SWC's "next/font" settings and my custom Babel configuration setup. I continued using Babel in my project as I needed it to test my Next.js components with Jest.
Initially, I followed the guidelines outlined on this particular website(in Japanese), which involved configuring a custom Babel setup.
Steps mentioned on the website
- Install the necessary packages (assuming you already have a Next.js project set up)
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
- Adjust the .babelrc file accordingly
{
"presets": ["next/babel"]
}
- Add the 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"
}
}
- Include a test script in your package.json
"scripts": {
...
"test": "jest --env=jsdom --verbose" // Add this
},
Example of the 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();
});
Project structure overview:
https://i.sstatic.net/E6HEq.png
Attempts made to resolve the issue:
- Disable font optimization feature: Even after disabling the font optimization feature in my next.config.mjs file with the provided code snippet, the same error persisted when accessing my local host./** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizeFonts: false,
},
};
export default nextConfig;
Environment details:
- Node.js version: v18.17.0
- Next.js version: 14.1.0
- TypeScript version: 5.3.3
- OS: macOS Monterey version 12.6.7
Are there any recommendations to troubleshoot this issue?
Alternatively, is there another way to utilize Jest within my project efficiently?
Any guidance or suggestions would be greatly appreciated.