Module not found: Can't resolve 'fs

Question

I'm trying to use useDapp and pinata SDK in my next js application. My package.json file looks like this:

  "name": "eternity",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@pinata/sdk": "^1.1.23",
    "@usedapp/core": "^0.10.0",
    "antd": "^4.18.5",
    "next": "12.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.9"
  }
}

The useDapp is working fine but when I try to use pinata api, I get errors. I ran a very basic test code like this:

import pinataSDK from "@pinata/sdk";

const pinataTest = () => {
  const pinata = pinataSDK(
    "5d349f3841ee16d7e668",
    "a6f32583de5736824a606746f0b9b9bc365a5c81b3d1c9f1a98822a39ddfbb6d"
  );
  pinata
    .testAuthentication()
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err);
    });
};

export default pinataTest; 

It is just a test code given in the official docs of pinata SDK. But I run into this error.

https://nextjs.org/docs/messages/module-not-found
wait  - compiling...
error - ./node_modules/@pinata/sdk/lib/pinata-sdk.js:24051:0
Module not found: Can't resolve 'fs'

Possible solutions to this error have been proposed here: Module not found: Error: Can't resolve 'fs' in

The solutions that seems to be working for me is modifying my next.config.js file like this:

module.exports = {
  reactStrictMode: true,
  externals: {
    FileReader: "FileReader",
  },

  webpack5: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = { fs: false };
    }
    return config;
  },
};

It seems to have solved the 'fs not found error, but then I run into this next error:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./node_modules/js-sha3/src/sha3.js:21:0
Module not found: Can't resolve 'process'

Import trace for requested module:
./node_modules/@ethersproject/keccak256/lib.esm/index.js
./node_modules/@ethersproject/abi/lib.esm/interface.js
./node_modules/@ethersproject/abi/lib.esm/index.js
./node_modules/@usedapp/core/dist/esm/src/constants/abi/index.js
./node_modules/@usedapp/core/dist/esm/src/constants/index.js
./node_modules/@usedapp/core/dist/esm/src/index.js
./pages/_app.js

It seems like the @useDapp module is not working without 'fs'. Is there a way to solve this? Or am I missing something fundamental while using useDapp and pinata SDK in my next js app.

Answer 1

I too got the error Module not found: Can't resolve 'fs

Simple solution worked for me:

import fs from "fs";