HOWTO: webpack

I trying to use ‘crypto’ library in my project and had error “Could Not load file ‘.lib/primes.json’”. The problem is in webpack.config. It can`t load json, so it is needed to add ‘json-loader’. In Ionic is a good webpack.config , but it not working for me.


The issue is to use { test: /\.json$/, loader: 'json-loader' } insted of just { test: /\.json$/, loader: 'json' }

I would strongly recommend using as much of WebCrypto as you possibly can.

It is not actually me using this library. Some other library need ‘crypto’. The issue was solved by just to update ionic-scripts, where webpack.config is fixed to load json files.

1 Like

I’m having the “crypto” problem with all the latest dependencies.
It only occurs in prod mode.

Do you know whether it’s your own code that’s causing it, or a dependency?

It’s in a dependency. I think it’s part of the aws-sdk or the cognito SDK.

Weird. I don’t see any raw crypto in cognito, and the only one I can find in aws-sdk is in node-loader.js, which doesn’t sound like something that webpack should be hitting.

Well, I think it’s probably amazon-cognito-identity-js. There is also a bug report which is possibly related to the issue I’m having with ionic:

It has to do with the webpack configuration but in ionic we cannot edit that as it’s handled by @ionic/app-scripts.

I took a deeper look into the problem now.
This is the code that fails for me:
, function(e, t, r) { "use strict"; !function() { var t, r, n = this; t = function(e) { for (var t, t, r = new Array(e), n = 0; n < e; n++) 0 == (3 & n) && (t = 4294967296 * Math.random()), r[n] = t >>> ((3 & n) << 3) & 255; return r } , n.crypto && crypto.getRandomValues && (r = function(e) { var t = new Uint8Array(e); return crypto.getRandomValues(t), t } ), e.exports = r || t }() }

It fails in line n.crypto && crypto.getRandomValues && (r = function(e) {.
And if I manually change “n.crypto” to “crypto” the whole ionic app works.

I tried searching the source script in which this gets called but couldn’t find it.
And like I said this only happens when building with --prod.

At least I can manually change the created script as a workaround for now.

Btw. I also tried removing amazon-cognito-identity-js from my app and the issue persisted. So unless I overlooked something that doesn’t seem to be the root cause.

I still have this issue only now the affected code is “this.crypto” in vendor.js.