Can't resolve 'fs'

[PohurskyiArtem]

Error compiling page in console:

[ ready ] compiled successfully
ready at https://localhost:3000
[ event ] build page: /
[ wait ] compiling ...
[ error ] ./node_modules/destroy/index.js
Module not found: Can't resolve 'fs' in ''C:\Users\admin\projects\gast\node_modules\destroy'
Could not find files for /index in .next/build-manifest.json
ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in 'C:\Users\admin\projects\gast\node_modules\destroy'

I have not used any new packages. It just came out of nowhere
I tried to install all the packages again in a separate folder and transfer the necessary components there. Nothing has changed, the same error

https://github.com/treuh/solgastrobar

[BjoernRave]

I think adding

webpack: (config, options) => {
        config.node = {
          fs: 'empty'
        }
}

to your next.config.js can resolve this issue

[timneutkens]

In general it means you're importing a server-only dependency in code that will be shipped to client-side users.

@BjoernRave it's not recommended to add that as server-only libs are generally massive and will bloat bundle size while working incompletely client-side.

---

Please follow the issue template.

https://github.com/zeit/next.js/issues/new/choose

https://github.com/zeit/next.js/issues/new?template=8.Question_about_next.md

# Question about Next.js

GitHub Issues are reserved for Bug reports and Feature requests. The best place to get your question answered is to post it on https://spectrum.chat/next-js.

[snnsnn]

Webpack trick did not solve my problem problem, here is what I did:

const context = {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  db: typeof window === 'undefined' ? require('diskdb').connect('folder', ['articles']) : null,
};

[ziimakc]

In my case in _app.tsx i was importing import { useApollo } from "@backend"; and bacause my @backend index file had other exports, they got into client bandle. Solved this changing import to import { useApollo } from '../backend/apollo/client'

[mixdev]

I have/had the same issue. So I moved a few of server-only requires (redis & other db clients) to inside the getStaticProps/ServersideProps.

[jschaufele]

this link solved my issue
#7755

-->next.config.js

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

return config

}
}

[jqhoogland]

For newer versions of next that use webpack5, use the following in your next.config.js instead (see for example):

 webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
      };
    }

    return config;
  },

[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.