Can't resolve 'fs' #50
Description
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