Because you write require("crypto"), use in Browser Webpack Bundle will inject more than 400kb node-browser code include bundle

[DemonCloud]

in crypto-js/core.js

	    // Native crypto import via require (NodeJS)
	    if (!crypto && typeof require === 'function') {
	        try {
	            crypto = require('crypto');
	        } catch (err) {}
	    }

this lib can not use in the browser, because the polyfill is so big more than 400kb with webpack bundle

[luoguibin]

same question...

[muzuiget]

same here, rollback to v3.3.0.

[entronad]

If the issues caused by secure radom of crypto-js 4.0 bother you, such as too large bundle, unavalible in React Native... Maybe you can try crypto-es .

We merged all updates of crypto-js 4.0 except the secure radom.

[hiradyazdan]

@evanvosberg If I understand correctly, tree shaking capability of webpack can reduce the size of final build if this library exports each of its individual functionality. Is there any blocker for this method?

Edit: I guess it's only that the entire codebase is not on ES...

[rahulbhadhoriya]

Does anyone solved this problem yet?

i solved it by using "crypto-js": "^3.1.9-1", instead of latest one.

[DemonCloud]

@rahulbhadhoriya yes, using crypto-js 3.1.9-1, crypto-js 4.0 about for NodeJS

[ozyman42]

If the issues caused by secure radom of crypto-js 4.0 bother you, such as too large bundle, unavalible in React Native... Maybe you can try crypto-es .

We merged all updates of crypto-js 4.0 except the secure radom.

Thanks for this!

[vyushin]

const isBrowser = typeof window !== 'undefined' && window.hasOwnProperty('Window') && window instanceof window.Window;
const crypto = isBrowser ? window.crypto : eval(`require('crypto')`);

When bundle is building it doesn't consider imports from eval method (I tryed webpack). This means that output bundle will not contain crypto after build (about 400kb).

[charmingYouYou]

If you use webpack to compile the file, you can add configuration to webpack.config.js

node = {
  crypto: false,
}

[hkjpotato]

It seems most of the concerns come from the fact that webpack will recognize the require keyword when resolving the module webpack/webpack#8826

While as a library consumer, we can update webpack config to add externals, as a library builder, it is a bit tricky (see issue aws-amplify/amplify-js#7570)

Let's say we build package A which depends on crypto-js/core. For our es build, we don't want to bundle crypto-js/core directly, which means when customer import our library, it will be

customerApp -> package-A -> require(crypto-js/core) -> require('crypto').

If the customer uses webpack to bundle its customerApp, it will include the native crypto (we dont want our customers to manually add crypto to their webpack config).

Instead, I am thinking if we can just use a trick in the crypto/core here:

const nativeCryptoModule = "crypto";
 crypto = require(nativeCryptoModule);

This way, node can still recognize it, but webpack won't try to resolve it since it is not a static path.

[hkjpotato]

decimal.js has encountered similar issue before, might be helpful.

MikeMcl/decimal.js#5
MikeMcl/decimal.js#42

[Arjun0o]

If you use webpack to compile the file, you can add configuration to webpack.config.js

node = {
  crypto: false,
}

Hi, can you please share your webpack configuration? I am a little confused as to where to use it

[charmingYouYou]

If you use webpack to compile the file, you can add configuration to webpack.config.js

node = {
  crypto: false,
}

Hi, can you please share your webpack configuration? I am a little confused as to where to use it

you can see https://v4.webpack.js.org/configuration/node/#root

[christophercr]

I guess this is already solved in the latest version v4.1.1? I'm using that one and don't face any of these issues anymore.