Why decrypt is not working in Nextjs on production ? TypeError: Cannot read properties of undefined (reading 'parse')

[croissant1998]

I use crypto-js for encrypt and decrypt some value but it's work fine on dev mode. I call function for encrypt on client component (after click button) and then decrypt in server component which value decrypt as a route params. I got error TypeError: Cannot read properties of undefined (reading 'parse') only on production mode. I'm not sure, I do something wrong.

import * as CryptoJS from "crypto-js";

const key = CryptoJS.enc.Utf8.parse(
  process.env.NEXT_PUBLIC_CRYPTO_JS_KEY
);
const iv = CryptoJS.enc.Utf8.parse(process.env.NEXT_PUBLIC_CRYPTO_JS_IV);

const aesEncryption = (data: string) => {
  try {
    const encrypted = CryptoJS.AES.encrypt(data, key, { iv });
    return encrypted.toString();
  } catch (error) {
    console.error(error);
    return "";
  }
};

const aesDecryption = (encryptedCode: string) => {
  try {
    const bytes = CryptoJS.AES.decrypt(encryptedCode, key, { iv });
    return bytes.toString(CryptoJS.enc.Utf8);
  } catch (error) {
    console.error(error);
    return "";
  }
};

[croissant1998]

For more information.

"crypto-js": "^4.2.0",
"next": "15.2.4",
"react": "^19.0.0",
"devDependencies": {
"@types/crypto-js": "^4.2.2",
"@types/react": "^19",
"@types/react-dom": "^19",
"typescript": "^5"
}

this code for encrypt

const encryptId = AesEncryptionUtil(`${id}`);
router.push(`/events/${encodeURIComponent(encryptId)}`);

this code for decrypt

const deCodeId = decodeURIComponent(params.id);
const id = AesDecryptionUtil(deCodeId);

[peng9627]

I have the same problem. Did you solve it? How did you solve it?

[peng9627]

`const crypto = require('crypto');

function aesEncrypt(text, key, iv) {
const cipher = crypto.createCipheriv('aes-256-cbc', Buffer.from(key), iv);

let encrypted = cipher.update(text);

encrypted = Buffer.concat([encrypted, cipher.final()]);

return iv.toString('hex') + ':' + encrypted.toString('base64');
}

function aesDecrypt(text, key) {

const parts = text.split(':');
const iv = Buffer.from(parts.shift(), 'hex');
const encryptedText = Buffer.from(parts.join(':'), 'base64');

const decipher = crypto.createDecipheriv('aes-256-cbc', Buffer.from(key), iv);

let decrypted = decipher.update(encryptedText);

decrypted = Buffer.concat([decrypted, decipher.final()]);
return decrypted.toString();
}

const algorithm = 'aes-256-cbc';
const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(16);

const originalText = 'Hello, AES Encryption!';
console.log('Original:', originalText);

const encrypted = aesEncrypt(originalText, key, iv);
console.log('Encrypted:', encrypted);

const decrypted = aesDecrypt(encrypted, key);
console.log('Decrypted:', decrypted);`

[peng9627]

I have solved this problem

[christianbueschi]

I have the same problem.

I found out that it works in a server action when it is called from a server component. But when the action is called from a client component (either by a user action or a useEffect) it does not work.

[christianbueschi]

For anyone that lands here, this was the fix in my case:

Added this to next.config.js

serverExternalPackages: [
   'crypto-js',
 ],

[ekko2665]

For anyone that lands here, this was the fix in my case:对于任何来到这里的人来说，这就是我情况的解决方案：

Added this to next.config.js将此内容添加到 next.config.js

serverExternalPackages: [
   'crypto-js',
 ],

u save me bro. i love u