Module not found: Error: Can't resolve 'fs' react js-CodePudding

For people who will meet this problem with tatum io v1 react ! Developers said that it's problem of react, they will fix it in V2 You can use tatum io V1 with node js !

I've added all dependencies that might fix this bug, but still have fs problem

App.js

import React from "react";
import {
  deployMarketplaceListing,
  sendMarketplaceApproveErc20Spending,
  sendMarketplaceBuyListing,
  sendMarketplaceCreateListing,
  sendCeloSmartContractReadMethodInvocationTransaction,
  sendAuctionApproveNftTransfer,
} from "@tatumio/tatum";

const App = () => {
  <>
    <div>
      <h1>TEST</h1>
    </div>
  </>;
};

export default App;

after this imports I had 40 errors. I've fixed most of them with this file

config-overrides.js

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    path: require.resolve("path-browserify"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

Than I have this one err multiple 8 times

ERROR in ./node_modules/@elrondnetwork/bls-wasm/bls_c.js 54:30-43

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/@elrondnetwork/bls-wasm'

ERROR in ./node_modules/@elrondnetwork/erdjs/out/smartcontracts/code.js 78:24-37

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/@elrondnetwork/erdjs/out/smartcontracts'

ERROR in ./node_modules/@elrondnetwork/erdjs/out/smartcontracts/typesystem/abiRegistry.js 78:24-37

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/@elrondnetwork/erdjs/out/smartcontracts/typesystem'

ERROR in ./node_modules/@elrondnetwork/erdjs/out/smartcontracts/wrapper/contractWrapper.js 48:29-42

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/@elrondnetwork/erdjs/out/smartcontracts/wrapper'

ERROR in ./node_modules/@elrondnetwork/erdjs/out/testutils/wallets.js 72:24-37

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/@elrondnetwork/erdjs/out/testutils'

ERROR in ./node_modules/@emurgo/cardano-serialization-lib-nodejs/cardano_serialization_lib.js 10824:14-40

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/@emurgo/cardano-serialization-lib-nodejs'

ERROR in ./node_modules/cardano-crypto.js/lib.js 38:28-41

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/cardano-crypto.js'

ERROR in ./node_modules/caver-js/packages/caver-ipfs/src/index.js 22:11-24

Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/caver-js/packages/caver-ipfs/src'

Than I've tried to fix them with

webpack.config.js

module.exports = (phase, { defaultConfig }) => {
  return {
    ...defaultConfig,

    webpack: (config) => {
      config.resolve = {
        ...config.resolve,
        fallback: {
          fs: false,
          path: false,
          os: false,
        },
        node: {
          fs: "empty",
        },
      };
      return config;
    },
  };
};

It didn't help a lot, than I've add to package.json these lines

"browser": {
    "fs": false,
    "path": false,
    "os": false
  },

So I've stacked at it, and trying to find solution for 2 hours, has anybody some ideas, how to fix that ? Thank you.

CodePudding user response：

Somehow your app's modules are missing.

I had a similar issue and I resolved it by calling:

npm cache clean --force
npm install

and then

npm start