This is a very strange issue, to me. I was developing a basic little PGP tool and it all worked well, I deployed and forgot. Went to test this morning on the server and it lags, crashing the browser sometimes but always spiking cpu to 100%. The culprit is the async call openpgp.generateKey(), that's what hangs after a build. When I serve it up via npm start its super snappy with no issues at all. I used create react app for this and have tried disabling chunking via this post: How can I disable chunk(code splitting) with webpack4?
But it didn't help. I have to assume that something in that build process is causing this, I just can't figure out what. Any help would be greatly appreciated!
import { useState } from 'react'
import * as openpgp from 'openpgp';
function GenKeys () {
const genKeyPair = async (name, email, passphrase) => {
const { privateKey, publicKey } = await openpgp.generateKey({
type: 'rsa', // Type of the key
rsaBits: 4096, // RSA key size (defaults to 4096 bits)
userIDs: [{ name, email }], // you can pass multiple user IDs
passphrase // protects the private key
});
setPrivateKey(privateKey)
setPublicKey(publicKey)
}
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [passphrase, setPassphrase] = useState('')
const [privateKey, setPrivateKey] = useState('')
const [publicKey, setPublicKey] = useState('')
return <div>
<input defaultValue={name} onChange={e => setName(e.target.value)} placeholder='Name' />
<input defaultValue={email} onChange={e => setEmail(e.target.value)} placeholder='Email' />
<input defaultValue={passphrase} onChange={e => setPassphrase(e.target.value)} type="password" placeholder='Password' />
<button onClick={e => genKeyPair(name, email, passphrase)}>Gen Keys</button>
<div>
<div>
Private Key
<br />
<textarea value={privateKey}></textarea>
</div>
<div>
Public Key
<br />
<textarea value={publicKey}></textarea>
</div>
</div>
</div>;
}
export default GenKeys;
