I'm trying to use some of the functions in eth-crypto npm module (https://github.com/pubkey/eth-crypto) by #pubkey , I create an empty react project install it via npm install eth-crypto --save and import it via import EthCrypto from 'eth-crypto'. And as soon as I import it I get all kinds of errors most notably:
"Error in ./node_modules/eccrypto/browser.js<br/>
Module not found: Error: Can't resolve 'crypto' in
'.......node_modules/eccrypto'
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 I get this error for 'crypto', 'assert', 'stream' and 'buffer'. I tried to solve it by installing each package, and also changing package.json and also webpack.config.js, all the things mentioned here:
https://bobbyhadz.com/blog/module-not-found-cant-resolve-crypto
But unfortunately if I try to force it and solve every problem, still the 'crypto' error is still there. I was curious if anyone has had any similar experience and a solution for this. Thanks
Related
I tried installing Node-SSH on my webserver, but I kept gettign errors. After a lot of tries I managed to duplicate the issue on a fresh environment as follows:
Install a new react typescript website using npx create-react-app my-app --template typescript
Install dependencies: npm install --save typescript #types/node #types/react #types/react-dom #types/jest
Install the node-ssh and its typescript dependencies starting with npm install --save-dev #types/ssh2 then npm i node-ssh
Add this code to 'App.tsx' file:
const {NodeSSH} = require('node-ssh')
const ssh = new NodeSSH()
I got about ~20 errors, a part of them:
ERROR in ./node_modules/asn1/lib/ber/writer.js 3:13-30
Module not found: Error: Can't resolve 'assert' in 'E:\ProjectsAI\devicewisevi\node_modules\asn1\lib\ber'
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: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }
ERROR in ./node_modules/make-dir/index.js 3:11-24
Module not found: Error: Can't resolve 'fs' in 'E:\ProjectsAI\devicewisevi\node_modules\make-dir'
ERROR in ./node_modules/safer-buffer/safer.js 5:13-30
Module not found: Error: Can't resolve 'buffer' in 'E:\ProjectsAI\devicewisevi\node_modules\safer-buffer'
I tried installing the missing packages but it's definetley not the correct way to fix it.. I figured it something to do with the way node_modules/#types is being compiled. I tried adding:
"typeRoots": [
"./node_modules/#types",
"./#types"
],
"types": ["node"],
to tsconfig.json file but it didn't help.
I would appreciate any help regarding the matter.
I am trying to using JWT token to add authentication on my react app. But, it's showing me this error:
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\HETARTH RAVAL\Desktop\WebDev\20-quotes\client\node_modules\jwa'
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 }
ERROR in ./node_modules/jwa/index.js 3:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\HETARTH RAVAL\Desktop\WebDev\20-quotes\client\node_modules\jwa'
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 }
I got exactly same error for 'util' and 'stream'. I tried looking for some fix on jwt repo on github. It says this error appears after updating react scripts to ^5.0.0. I dont exactly know how to fix this. How do I make these errors go away?
Go to the file node_modules/react-scripts/config/webpack.config.js
as the suggestion suggests on line no. 305 you need changes like this.
resolve: { fallback: { "crypto": require.resolve("crypto-browserify")}
This tells webpack to use the crypto-browserify package as a fallback when the crypto module is not found.
You also need to install the crypto-browserify package in your project by running this command in your terminal:
> npm install crypto-browserify
NB: If you didnt find the line resolve on the line 305 in webpack.config.js use the search option
Just added rabbitode to my React TypeScript app so I can read from RabbitMQ. The instructions are quite straightforward, however, I hit a number of issues after installation. My module doesn't compile at all. There were a number of issues related to my using webpack 5, as described here this answer. Most of these could be resolved with the provided answer (util, buffer and querystring-es3) but I'm getting no joy with stream-browserify. Also, there are a couple of errors that I can't track down at all:
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connect.js 155:11-33
Module not found: Error: Can't resolve 'net' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connect.js 157:11-33
Module not found: Error: Can't resolve 'tls' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
The lines the error is about are:
if (protocol === 'amqp:') {
sock = require('net').connect(sockopts, onConnect);
}
else if (protocol === 'amqps:') {
sock = require('tls').connect(sockopts, onConnect);
}
else {
throw new Error("Expected amqp: or amqps: as the protocol; got " + protocol);
}
Thought this could be related to my node version as net and tls are available libraries
according to the docs but the issue remains.
Any idea about how to fix it??
Also, the stream error is:
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connection.js 18:13-37
Module not found: Error: Can't resolve 'stream' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
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: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
That I tried resolving by running npm install stream-browserify and adding stream: require.resolve("stream-browserify"), to the the fallback object in the webpack config. Why would this not work??
UPDATE
I think the problem is related to a couple of key facts:
I bootstrapped my application with the create-react-app and therefore by webpack config was ignored
rabbitode is relying on packages that were not meant for browser use.
I think the solution here is to look for a library that is more fit for purpose (or add an SseEmitter into my SpringBoot backend that reads from the queue, then read its contents in the client via an EventSource
I'm the author of the package, unfortunately it's not meant for use on frontend applications it's meant for node.js servers.
If you did find a workaround to get it working on the frontend I'd love to hear it and I'll see if I can add native support to it :)
Thanks
Evan
I have a react App and I'm trying to use a library which gives me these errors:
ERROR in ./node_modules/esm/esm.js 30:10-27
Module not found: Error: Can't resolve 'module' in '.../node_modules/esm'
# ./node_modules/beer-color/index.js 3:10-24
ERROR in ./node_modules/esm/esm.js 33:4-17
Module not found: Error: Can't resolve 'vm' in '.../node_modules/esm'
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: { "vm": require.resolve("vm-browserify") }'
- install 'vm-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "vm": false }
# ./node_modules/beer-color/index.js 3:10-24
It seems I need to add a polyfill to WebPack.
How can I do this without having to eject all settings?
yarn add react-app-polyfill core-js
Then, create polyfills.js manually on the same directory with index.js
import './polyfills'; // index.js
I've a JavaScript ES6 development environment with webpack 2.2.1 where I'm developing an application package-a.
I'm also using this environment for managing a development dependency on package-b which is defined by using npm link.
The environment works well.
Now I need to polyfill the fetch API that is used by package-b.
So whatwg-fetch has ben installed.
The polyfilling way I'm using is the one suggested in this discussion: https://gist.github.com/Couto/b29676dd1ab8714a818f#gistcomment-1584602
So I'm not calling import 'whatwg-fetch' on my code but I've this in my webpack configuration:
plugins: [
new webpack.ProvidePlugin({
'Promise': 'es6-promise',
'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
'Headers': 'imports-loader?this=>global!exports-loader?global.Headers!whatwg-fetch'
}),
...
This always worked well for me, and also works if I use fetch from my main (package-a) module but as I use fetch in the dependency I get this traceback:
ERROR in ../package-b/~/imports-loader?this=>global!../package-b/~/exports-loader?global.fetch!../ecmwf-prwa-editor/~/whatwg-fetch/fetch.js
Module build failed: Error: "...package-b/node_modules/whatwg-fetch/fetch.js" is not in the SourceMap.
Note that the traceback contains ref to the package-b node_modules directory (where whatwg-fetch is installed as a development dependency only as I want to keep in "pure" and without automatically polifyll host env).
Removing the development dependency and removing it from node_modules change the traceback:
ERROR in ../package-b/src/something/something.js
Module not found: Error: Can't resolve 'whatwg-fetch' in '/Users/keul/.../package-b/src/something'
...
If I drop this way of polyfilling and simply I put import 'whatwg-fetch' on package-a all works normally.
Question is: what's happening here? I'm developing a package where the dependency is present, why the polyfill through webpack is failing in this case? There' a way to fix it?