Module not found: Can't resolve 'fs' in a Next.js app

[talentlessguy]

I'm trying to import the schema using this code:

import { loadSchema } from '@graphql-toolkit/core'
import { UrlLoader } from '@graphql-toolkit/url-loader'

export const schema = loadSchema('http://localhost:8080/graphql', {
  // load from endpoint
  loaders: [new UrlLoader()]
})

Whenever I try to import the schema, either on client or server side, it throws this:

./node_modules/.pnpm/registry.npmjs.org/@nodelib/fs.scandir/2.1.3/node_modules/@nodelib/fs.scandir/out/adapters/fs.js
Module not found: Can't resolve 'fs' in '/home/v1rtl/Coding/komfy/frontend/node_modules/.pnpm/registry.npmjs.org/@nodelib/fs.scandir/2.1.3/node_modules/@nodelib/fs.scandir/out/adapters'

Should I tweak webpack config somehow to make it work?

[ardatan]

node: {
    fs: "empty"
}

Could you try to add this to your webpack configuration to mock fs?

[ardatan]

Feel free to open a new issue if it persists.

[talentlessguy]

@ardatan sorry for not responding, yes, it now forks perfectly. Here's the config I used for next.config.js:

/* eslint-disable @typescript-eslint/no-var-requires */

const isProd = process.env.NODE_ENV === 'production'

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

    return config
  },
}

[ardatan]

Thank you for your feedback. Your feedback is important for us to know if the issue is relevant :)