Vite+React+TypeScript项目中xlsx库默认导出报错求助

在基于Vite、ReactJS、TypeScript的项目中使用xlsx库时，一直碰到这个错误：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/xlsx.js?v=823b22a3' does not provide an export named 'default'

项目核心代码如下：

import React from "react"
import * as XLSX from "xlsx"
import DragDropFile from "../File/DragDropFile"
import DataInput from "../File/DataInput"
import OutTable from "../File/OutTalbe"

export default class SheetJSApp extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      data: [] /* 二维数组格式，示例：[["a","b"],[1,2]] */,
      cols: [] /* 列对象数组，示例：{ name: "C", K: 2 } */,
    }
    this.handleFile = this.handleFile.bind(this)
    this.exportFile = this.exportFile.bind(this)
  }
  handleFile(file: File) {
    /* 初始化FileReader */
    const reader = new FileReader()
    const rABS = !!reader.readAsBinaryString
    reader.onload = (e) => {
      /* 解析文件数据 */
      const bstr = e.target?.result
      const wb = XLSX.read(bstr, { type: rABS ? "binary" : "array" })
      /* 获取第一个工作表 */
      const wsname = wb.SheetNames[0]
      const ws = wb.Sheets[wsname]
      console.log(rABS, wb)
      /* 转换为二维数组 */
      const data = XLSX.utils.sheet_to_json(ws, { header: 1 })
      /* 更新组件状态 */
      this.setState({ data: data, cols: make_cols(ws["!ref"]) })
    }
    if (rABS) reader.readAsBinaryString(file)
    else reader.readAsArrayBuffer(file)
  }
  exportFile() {
    /* 将状态数据转为工作簿 */
    const ws = XLSX.utils.aoa_to_sheet(this.state.data)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS")
    /* 生成并下载XLSX文件 */
    XLSX.writeFile(wb, "sheetjs.xlsx")
  }
}

当前项目配置文件：

vite.config.js #

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    commonjsOptions: {
      esmExternals: true,
    },
  },
})

package.json（片段） #

"resolutions": {
    "**/react-element-to-jsx-string": "14.3.2"
  }
}

这个错误源于xlsx本质是CommonJS模块，Vite在ESM环境下处理时的兼容问题，结合TypeScript环境，可通过以下几种方式解决：

• 修改导入方式
  把原来的import * as XLSX from "xlsx"替换成ESM专用入口：

  import XLSX from 'xlsx/xlsx.mjs'
  import 'xlsx/dist/xlsx.mini.css' // 若需要样式则添加
  

  或者用动态导入（适合非全局使用场景）：

  const XLSX = await import('xlsx')
  

• 调整Vite配置
  在vite.config.js中添加针对xlsx的CommonJS优化配置：

  export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
      include: ['xlsx'],
    },
    build: {
      commonjsOptions: {
        include: [/xlsx/, /node_modules/],
      },
    },
  })
  

• 安装TypeScript类型定义
  确保安装xlsx的类型包，避免TS语法报错：

  npm install @types/xlsx --save-dev
  

• 降级依赖版本
  若使用的是较新的xlsx版本，可尝试降级到稳定版本（比如0.18.5），部分新版本存在ESM导出兼容问题：

  npm install xlsx@0.18.5
  

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