webpack 5 & next.js 10 - how to add resolve fallback to config

Have you ever got:

    error - <some-3rd-party-lib>:0

    Module not found: Can't resolve 'fs' // or process, Buffer, etc.

error in your nextjs app; and the all the solutions on stack overflow were pointing to something like:

// webpack.config.js
{
  resolve: {
        fallback: { "fs": false }
  }
}

when you didn't even have webpack.config.js?

Quick solution

It's all because nextjs is hiding its webpack configuration. It's simplifying for most use cases, but a bit of a pain in some others. The quick solution for it is to this into next.config.js:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

Longer overview

Links

• my video course on webpack

Comments

[daveybrown]

If you do this then you don't overwrite the existing fallback

config.resolve.fallback = {
  ...config.resolve.fallback,
  fs: false
}

[Juan Antonio Navarro]

Thanks a lot.

[daveybrown]

No worries :)

[Ryan Lesson]

Had to create an account to thank you for this!!! Everything on Stack Overflow is incorrect.

[daveybrown]

Agreed .. it's a nice blog series, and this one was especially useful, as I couldn't really find much else on the subject.

[harish kurup]

Hi Did the same thing but still getting the following error
ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs'

My webpack config
module.exports = {
resolve: {
fallback: {
fs: false,
"path": require.resolve("path-browserify"),
"os": require.resolve("os-browserify/browser")
}
}
};