【React+Antd】关于Upload导入XLSX时Uint8Array报错 XLSX.read的问题原因及解决方法

报错TypeError: Cannot read properties of undefined (reading 'read') 的时候 把导入import XLSX from 'xlsx'; 改成 import * as XLSX from 'xlsx/xlsx.mjs'; 就可以了，请问是为什么？

这是因为 XLSX 库的模块结构发生了变化，从传统的 CommonJS 模块转换为 ES 模块。

相关知识

当涉及到 JavaScript 模块系统时，有两种常见的导入方式：CommonJS 和 ES 模块。

1. CommonJS 和 ES 模块的区别：

   • CommonJS 是 Node.js 默认的模块系统，它使用 require() 和 module.exports 进行模块的导入和导出。
   • ES 模块是 ECMAScript 标准定义的模块系统，在浏览器端和最新版本的 Node.js 中得到广泛支持，使用 import 和 export 语法进行模块的导入和导出。

2. CommonJS 和 ES 模块的语法对比：

   • CommonJS 的导入语法：const module = require('module');
   • CommonJS 的导出语法：module.exports = module;
   • ES 模块的导入语法：import module from 'module';
   • ES 模块的导出语法：export default module;

3. CommonJS 和 ES 模块的特性对比：

   • CommonJS 是同步加载模块，适用于服务器端的模块加载。
   • ES 模块是异步加载模块，支持静态分析，适用于浏览器端的模块加载。

4. 在浏览器中使用 ES 模块：

   • 在现代浏览器中，可以使用 <script type="module"> 的方式来引入和使用 ES 模块。
   • 在 ES 模块中，可以使用 import 和 export 语法来导入和导出模块。

5. 在 Node.js 中使用 ES 模块：

   • 在较新版本的 Node.js 中，可以直接使用 ES 模块的语法进行导入和导出。
   • 可以使用 .mjs 文件扩展名来标识该文件是 ES 模块。
   • 或者可以在 package.json 文件中设置 "type": "module" 来启用 ES 模块，然后可以使用 .js 文件扩展名进行导入和导出。

CommonJS 和 ES 模块系统的差异。