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

简介: 【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 中得到广泛支持,使用 importexport 语法进行模块的导入和导出。
  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 模块中,可以使用 importexport 语法来导入和导出模块。
  5. 在 Node.js 中使用 ES 模块:

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

    CommonJS 和 ES 模块系统的差异。

相关文章
|
2月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
89 0
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
详解React antd中setFieldsValu的简便使用
详解React antd中setFieldsValu的简便使用
77 0
|
27天前
|
资源调度 前端开发
|
2月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
86 0
|
22天前
|
JSON DataWorks 关系型数据库
DataWorks操作报错合集之同步Elasticsearch数据报错:Cat response did not contain a JSON Array,是什么导致的
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
28天前
|
前端开发 索引
解决React报错Encountered two children with the same key
解决React报错Encountered two children with the same key
|
29天前
|
前端开发
react怎么做图片报错处理
react怎么做图片报错处理
14 1
|
2月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
49 0