Resolving "Cannot find module 'next/babel'" in Next.js

When integrating ESLint into a Next.js project, you may encounter the following error:

Parsing error: Cannot find module 'next/babel'

This error typically appears as a wavy underline beneath the very begining word in files such as next.config.js, tailwind.config.js, and postcss.config.js.

The Solution

Fortunately, there’s a straightforward fix for this issue. The solution involves adding a single line to your .eslintrc file:

1. Open your .eslintrc file.
2. Locate the extends array.
3. Add "next/babel" to the array.

Your .eslintrc file should now look something like this:

{
  "extends": ["next/core-web-vitals", "next/babel"]
}

After making this change, the wavy underline should disappear, resolving the parsing error.

Conclusion

While the “Cannot find module ‘next/babel’” error can be frustrating, the fix is typically straightforward. By adding “next/babel” to your ESLint configuration, you can resolve the issue in most cases. However, always test your solution thoroughly across different environments to ensure compatibility.