Webpack 5 polyfill errors with solana wallet adapters in react

Viewed 28

I'm new to Solana and trying to follow this tuto : https://learn.figment.io/tutorials/chakra-ui-with-solana-dapps

It's not working and after 2 days of research I can't find a solution.

I've npx create-react-app and installed the libraries.

Problems appears when I try to use the solana/wallet-adapter-(base,react,react-ui and wallets).

I have this message :

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

and A LOT of others like :

ERROR in ./node_modules/@jnwng/walletconnect-solana/lib/esm/index.js 2:0-25 Module not found: Error: Can't resolve './errors' in '/Users/.../dev/solana/.../app/node_modules/@jnwng/walletconnect-solana/lib/esm' Did you mean 'errors.js'?

I'll lie if I say understand what's going on.

First the webpask/polyfill part I failed to find an example that make my problem disappear...I tought I fixed it (many times with many different soplutions found online) but error message is always there

Second those node_modules I failed to understand.

That for your help and explanations

Here's my package.json

{
  "name": "fend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.3.2",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@headlessui/react": "^1.7.2",
    "@heroicons/react": "^2.0.11",
    "@solana/wallet-adapter-base": "^0.9.17",
    "@solana/wallet-adapter-react": "^0.15.19",
    "@solana/wallet-adapter-react-ui": "^0.9.17",
    "@solana/wallet-adapter-wallets": "^0.18.10",
    "@solana/web3.js": "^1.62.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "crypto-browserify": "^3.12.0",
    "framer-motion": "^7.3.5",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.0.8",
    "stream-browserify": "^3.0.0",
    "web-vitals": "^2.1.4",
    "webpack": "^5.74.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.11",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  }
}
0 Answers
Related