reactjs – Module not found: Error: Could not resolve ‘crypto’ in ‘C:

[ad_1]

ERROR MESSAGE:

Compiled with problems: X ERROR in ./node_modules/@solana/spl-name-service/dist/utils.js 16:17-34 Module not found: Error: Could not resolve ‘crypto’ in ‘C:Users . ..node_modules@solanaspl-name-servicedist’ BREAKING CHANGE: webpack < 5 used to include polyfills for default node.js core modules. This is no longer the case. Check if you need this module and set up a polyfill for it. If you want to include a polyfill, you must: - 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 }

Where the problem started:

My project:

getParsedNftAccountsByOwner() React, Typescript project Libraries used: @solana/web3.js | @nfteyez/sol-rayz webpack 5.67.0

What I’ve done so far:

I tried running both suggestions from the error message, and it didn’t work

I have already tried the first two solutions:

“compilerOptions”: {“baseUrl”: “./”, “paths”: {“crypto”: [
“node_modules/crypto-js”
]
}

Module not found: error: could not resolve ‘crypto’

I tried this solution:

“browser”: { “crypto”: false }

https://github.com/tensorflow/tfjs/issues/494#issuecomment-481636128

I tried this solution: node-polyfill-webpack-plugin

https://stackoverflow.com/a/65556946/18007508

const NodePolyfillPlugin = require(“node-polyfill-webpack-plugin”) module.exports = { // Other rules… plugins: [
new NodePolyfillPlugin()
]
}

My code: webpack.config.js

const HtmlWebpackPlugin = require(“html-webpack-plugin”); const MiniCssExtractPlugin = require(“mini-css-extract-plugin”); const NodePolyfillPlugin = require(“node-polyfill-webpack-plugin”) module.exports = { input: “./src/components/index.tsx”, target: “web”, mode: “development”, output: { path : path.resolve(__dirname, “build”), filename: “bundle.js”, }, resolve: { extensions: [“.js”, “.jsx”, “.json”, “.ts”, “.tsx”]fallback: { “crypto”:require.resolve(‘crypto-browserify’) , } }, module: { rules: [
{
test: /.(ts|tsx)$/,
loader: “awesome-typescript-loader”,
},
{
enforce: “pre”,
test: /.js$/,
loader: “source-map-loader”,
},
{
test: /.css$/,
loader: “css-loader”,
},
]}, plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, “src”, “components”, “index.html”),
}),
new MiniCssExtractPlugin({
filename: “./src/yourfile.css”,
}),
new NodePolyfillPlugin()
]};

package.json

{ “name”: “my-app”, “version”: “0.1.0”, “private”: true, “dependencies”: { “@headlessui/react”: “^1.4.3”, “@heroicons/ react”: “^1.0.5”, “@nfteyez/sol-rayz”: “^0.9.1”, “@nfteyez/sol-rayz-react”: “^0.9.1”, “@solana/spl- name-service”: “^0.1.3”, “@solana/wallet-adapter-base”: “^0.9.2”, “@solana/wallet-adapter-react”: “^0.15.2”, “@ solana/wallet-adapter-react-ui”: “^0.9.4”, “@solana/wallet-adapter-wallets”: “^0.14.2”, “@solana/web3.js”: “^1.32.0 “, “@testing-library/jest-dom”: “^5.16.1”, “@testing-library/react”: “^12.1.2”, “@testing-library/user-event”: “^13.5 .0”, “@types/jest”: “^27.4.0”, “@types/node”: “^16.11.19”, “assert”: “^2.0.0”, “axios”: “^0.25 .0”, “browser”: “^0.2.6”, “crypto”: “^1.0.1”, “crypto-browserify”: “^3.12.0”, “crypto-js”: “^4.1.1 “, “install”: “^0.13.0”, “node-polyfill-webpack-plugin”: “^1.1.4”, “react”: “^17.0.2”, “react-dom”: “^17.0 .2”, “react-redux”: “^7.2.6”, “react-router”: “^6.2.1”, “react-router-dom”: “^6.2.1”, “react-scripts” : “5.0.0”, “redux”: “^4.1.2”, “redux-thunk”: “^2.4.1”, “store”: “^2.0.12”, “stream”: “^0.0.2”, “stream-browserify”: “^3.0.0″, ” styled-components”: “^5.3.3”, “three”: “^0.136.0”, “web-vitals”: “^2.1.3” }, “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”: { “@types/react”: “^17.0.38”, “@types/react-dom”: “^17.0.11”, “@types/react-redux”: “^7.1. 22”, “@types/react-router-dom”: “^5.3.2”, “@types/styled-components”: “^5.1.20”, “autoprefixer”: “^10.4.2”, “great -typescript-loader”: “^5.2.1”, “css-loader”: “^6.5.1”, “html-webpack-plugin”: “^5.5.0”, “mini-css-extract-plugin” : “^2.5.0”, “postcss”: “^8.4.5”, “source-map-loader”: “^3.0.1”, “tailwindcss”: “^3.0.15”, “typescript”: ” ^4.5.4″, “webpack-dev-server”: “^4.7.3” } }

[ad_2]