Hello devs, in this error solving tutorial i will show you that how we can solve nextjs module not found can t resolve error. Today when i was working on next js project and i faced this module not found can t resolve fs next js.
If we're building a Next.js application that uses a Node.js module that exists on the server-side such as the file system (fs
) module, we may see the below error on build because the module can't be found on the client-side (the browser):
So i decided i will share with my codecheef readers that way to solve this next.js webpack ModuleNotFoundError
. So let's see that how to solve this next.js webpack modulenotfounderror.
If you want to fix the error with Webpack 5, update your Next.js config file (/next.config.js
) with the following:
next.config.js
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
// don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
config.resolve.fallback = {
fs: false
}
}
return config;
}
}
If you want to fix the error with Webpack 4, update your Next.js config file (/next.config.js
) with the following:
next.config.js
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
// set 'fs' to an empty module on the client to prevent this error on build --> Error: Can't resolve 'fs'
config.node = {
fs: 'empty'
}
}
return config;
}
}
Hope it can help you.
#react-js #node-js #webpack #next-js