Next.js: fs missing from webpack

[paOol]

getting this error

 ERROR  Failed to compile with 1 errors                                                                21:03:36

This module was not found:

* fs in ./~/request/lib/har.js

To install it, you can run: npm install --save fs

from googling around, it seems some people had success with adding

node: {
  fs: "empty"
}

to their webpack config

I tried adding that in next.config.js without success.
could it be syntax, or is that not the correct file ?

similar issue seen here https://github.com/josephsavona/valuable/issues/9

[sergiodxa]

Your imported modules must be universal/isomorphic compatible, that means they can't use the fs module and other non-universal modules (net, http, etc.).

[timneutkens]

Like Sergio said, it's not possible to use fs.

[RobinDvorak]

This can be solved with adding config.node = {fs: "empty"}; to your config.

[caskater4]

I've added the node property to the config but this still isn't working for me.

My next.config.js looks like this...

const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')
module.exports = (phase, {defaultConfig}) => {
const myConfig = {
publicRuntimeConfig: {
...
},
webpack: (config, {buildId, dev, isServer, defaultLoaders}) => {
config.node = {
fs: "empty"
};
return config;
}
}

if (phase === PHASE_DEVELOPMENT_SERVER) {
const publicRuntimeConfig = Object.assign(myConfig.publicRuntimeConfig, {
...
});
return Object.assign(myConfig, {
publicRuntimeConfig
});
}
else {
return myConfig;
}
}

What am I doing wrong?

[billnbell]

you can also just exclude index.js

[RobinDvorak]

Good point from @billnbell. Just import for example MapboxDraw like this:
import MapboxDraw from "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw";

[CoryKleiser]

Thank you @RobinDvorak!!

For Vue users. His solution also works in the nuxt.config.js

[bnmghjtyu0]

// next.config.js

module.exports = withImages(
  withCSS(
    withSass({
      exportPathMap: function() {
        return {
          '/': { page: '/' }
        }
      },
      webpack(config) {
        config.node = { fs: 'empty' }
        return config
      },
    })
  )
)