React项目使用CryptoJS报CryptoJS is undefined错误如何解决？

问题场景 #

在ReactJS项目开发中调用CryptoJS库的AES方法实现加密功能，触发加密操作时收到如下报错：
TypeError: crypto_js__WEBPACK_IMPORTED_MODULE_1__.CryptoJS is undefined
报错触发位置为调用CryptoJS.AES.encrypt的代码行，原有实现代码如下：

import React, {useState} from 'react';
// 错误的导入写法
import {CryptoJS} from 'crypto-js';
export function Register(){
    var body = /* 存储注册信息的JSON对象 */
    var encyMssg = CryptoJS.AES.encrypt(JSON.stringify(body), "key").toString();

    return(/* HTML组件 */);
}

问题原因 #

crypto-js 模块采用默认导出的方式暴露完整的CryptoJS对象，不需要使用具名导入的大括号包裹导入对象。带大括号的写法会尝试导入模块下名为CryptoJS的具名导出属性，而该属性不存在，因此会报undefined错误。

解决方法 #

修改import导入语句，去掉大括号使用默认导入即可：

import CryptoJS from 'crypto-js';

内容的提问来源于stack exchange，提问作者P2000Gua