NextJS 12 and webpack 5 unknown property 'fs'

Question

I have upgraded from Next10 to Next12 (webpack5), also from React16 to React17. This is how some of our next.config.js looks like:

const config = {
  webpack: (config, { isServer, buildId }) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty',
    }

When running a dev server this error comes up and I'm not sure how to work around it:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].node has an unknown property 'fs'. These properties are valid:
   object { __dirname?, __filename?, global? }
   -> Options object for node compatibility features.
 - configuration[1].node has an unknown property 'fs'. These properties are valid:
   object { __dirname?, __filename?, global? }
   -> Options object for node compatibility features.
    at validate (C:\Users\Alvaro Lamadrid\Documents\origin\origin-dollar\dapp\node_modules\next\dist\compiled\schema-utils3\index.js:1:150822)

Answer 1

Make sure that you preserve all the default settings in your next.config.js

config.node = { ...config.node, fs: "empty" }