Can't resolve 'fs'

[MohammedAlSafwanOld]

Started a new project. Added cardano-wallet-js package. When I import it, I get this error on the page:

ERROR in ./node_modules/@emurgo/cardano-serialization-lib-nodejs/cardano_serialization_lib.js 13413:14-40
Module not found: Error: Can't resolve 'fs' in './node_modules/@emurgo/cardano-serialization-lib-nodejs'

but in the console, I see this error:

Uncaught TypeError: TextDecoder is not a constructor
    at ./node_modules/@emurgo/cardano-serialization-lib-nodejs/cardano_serialization_lib.js (cardano_serialization_lib.js:26:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/cardano-wallet-js/dist/utils.js (utils.ts:3:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/cardano-wallet-js/dist/wallet/shelley-wallet.js (shelley-wallet.ts:2:1)
    at options.factory (react refresh:6:1)

WalletContainer.js

import { WalletServer } from "cardano-wallet-js"; <<<<< THIS CAUSE THE ERROR
import { NavLinks } from "pages/CommonComponents/NavLinks";
import { useEffect } from "react";
import WalletView from "./WalletView";

const WalletContainer = () => {

  console.log("WalletContainer");

  const connectWallet = async () => {
    let walletServer = WalletServer.init('http://localhost.local:8090/v2');
    let information = await walletServer.getNetworkInformation();
    console.log("wallet info: ", information);
  };

  useEffect(() => {
    connectWallet();
  }, []);

  console.log(information);

  return (
    <div>
      <NavLinks />
      <WalletView title="Wallet View" />
    </div>
  );
};

export default WalletContainer;

package.js

{
  "name": "cardano-react",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "env-cmd -f ./envs/.env.development react-scripts start",
    "build": "react-scripts build",
    "test": "env-cmd -f ./envs/.env.development react-scripts test",
    "eject": "react-scripts eject",
    "magic": "webpack",
    "clean": ""
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browser": { <<<< I TRIED THIS SOLUTION BUT IT DID NOT WORK
    "fs": false
  },
  "dependencies": {
    "@fontsource/roboto": "^4.5.8",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.2.3",
    "@types/node": "^18.11.9",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "axios": "^1.1.3",
    "cardano-wallet-js": "^1.4.0",
    "cardanocli-js": "^4.1.4",
    "crypto-browserify": "^3.12.0",
    "env-cmd": "^10.1.0",
    "i18next": "^22.0.6",
    "i18next-browser-languagedetector": "^7.0.1",
    "path": "^0.12.7",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.0.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.2",
    "stream": "^0.0.2",
    "stream-browserify": "^3.0.0",
    "text-encoding": "^0.7.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.9.3",
    "util": "^0.12.5",
    "web-vitals": "^2.1.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

OS:

Linux 5.15.76-v8+ #1597 SMP PREEMPT Fri Nov 4 12:16:41 GMT 2022 aarch64 unknown unknown GNU/Linux

[MohammedAlSafwanOld]

Tried on a different CPU arch, still same result but nothing

Linux xxxxxxxx 5.10.0-18-amd64 #1 SMP Debian 5.10.140-1 (2022-09-02) x86_64 GNU/Linux

[AdaWayda]

Did you happen to find out what the issue was?

From the looks of it, I'm guess this project is dead and should no longer be used.

[munishantier]

Do npm i and clear cache, it works on my end but it throw exception on TextDecoder. Anyone have any idea

[MohammedAlSafwanOld]

I abended the project. No solution was found at that time.