I am working on a NextJs project. In it, I have found this piece of code inside next.config.js:
const withTM = require('next-transpile-modules')([
'some package',
'some package',
'emittery',
'@next/react-dev-overlay'
]);
I was wondering what is the purpose of this @next/react-dev-overlay and was not able to find anything online. The only thing was this unanswered question in the nextjs github issues. When I remove it, it seems that the project is working as expected. My question is what is the purpose of this @next/react-dev-overlay package and should I remove it?
The @next/react-dev-overlay package is a development-only overlay for React apps. It's used internally by Next.js to display the error messages you see in development.
This is what the error overlay looks like when a client-side error occurs in a Next.js app:
As to why that package was included in next.config.js, I can only guess that it's being used directly in that app, and needs to be transpiled to be used. Most of the times you wouldn't need to install it or use it directly.