使用Vite构建React应用时导入countdown模块报错

错误原因 #

countdown@2.6.0是**非ES模块格式（UMD/IIFE）**的包，未遵循ES模块的导出规范：

1. 你最初用import countdown from 'countdown'导入时，Vite构建依赖的Rollup会严格检查模块导出，发现该包没有导出default，因此抛出构建错误；而开发模式下Vite做了宽松兼容处理，所以未报错。
2. 改用* as countdown时，导入的是一个命名空间对象，但该包的导出逻辑并非ES模块的命名导出，无法直接调用这个对象，因此出现"Cannot call a namespace"错误。

解决方法 #

方法1：使用CommonJS的require导入 #

Vite支持在ES/TS文件中混用CommonJS语法，直接用require导入即可：

const countdown = require('countdown');

如果是TypeScript项目，若没有对应类型声明文件，可添加注释忽略类型错误：

// @ts-ignore
const countdown = require('countdown');

也可以安装官方类型包（若存在）：

npm install @types/countdown --save-dev

方法2：配置Vite优化依赖，转换为ES模块 #

在vite.config.ts中添加优化配置，让Vite将countdown转换为ES模块格式：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['countdown'],
    esbuildOptions: {
      format: 'esm',
    },
  },
});

配置后重启开发服务器，再执行构建即可。

方法3：通过CDN引入全局变量（不推荐） #

在项目的index.html中引入countdown的CDN链接：

<script src="https://cdn.jsdelivr.net/npm/countdown@2.6.0/countdown.min.js"></script>

然后在组件中通过全局变量访问：

const countdown = (window as any).countdown;

这种方式会跳过打包，不适合需要离线运行的项目。

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