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 josephsavona/valuable#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
      },
    })
  )
)

[phdduarte]

I searched all over the internet and the only solution is to @bnmghjtyu0.
I worked six hours :(
Thanks.

// next.config.js

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

[AbingPj]

Thank you @RobinDvorak!!

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

@CoryKleiser how did you applied it on the nuxt.config.js of vimeo.js ? can you share it to me?

[luisfelipesdn12]

// next.config.js

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

I've this while using that:

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

[wmcb91]

@luisfelipesdn12 Next 11 uses Webpack 5 instead of Webpack 4 where the config.node = { fs: 'empty' } was a valid schema. You can find the new solution to this issue here #7755 (comment)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.