Next.js Webpack Module Not Found Error (Solved)

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.

Fix for Webpack 5

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;
    }
}

Fix for Webpack 4

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.