使用 Vite 构建 React 应用程序时导入“倒计时”模块会导致错误

Question

我在我的 React 应用程序中使用“倒计时”模块，我是这样导入的：

import countdown from 'countdown';

当我使用 Vite 在开发模式下运行应用程序时，一切正常。但是，当我尝试构建应用程序时，出现以下错误：

RollupError: "default" is not exported by "node_modules/.pnpm/[email protected]/node_modules/countdown/countdown.js", imported by "src/App.tsx".

我尝试将导入语句更改为

* as countdown

，但随后出现以下错误：

DEFAULTS" is not exported by "node_modules/.pnpm/[email protected]/node_modules/countdown/countdown.js", imported by "src/App.tsx".
Cannot call a namespace ("countdown").

这里是MRE

有谁知道可能导致这些错误的原因以及我该如何解决这些错误？我是 React 和 Vite 的新手，所以任何帮助将不胜感激。

提前致谢！

Answer 1

你应该使用命名的导入

import * as countdown from 'countdown';

如果这仍然给你错误“无法调用命名空间”，你可以尝试访问倒计时模块的功能，如

const remainingTime = countdown.default(new Date(2023, 4, 20));

Answer 2

虽然我不是特别喜欢这个解决方案，但它确实有效。本质上，我复制了库代码和类型声明（

countdown.js

和

countdown.d.ts

），将

countdown.js

变成一个 esm 模块，并对

countdown.d.ts

进行了小的编辑以导出模块。

let countdown: countdown.CountdownStatic;
export default countdown;

通过这些更改，一切都按预期运行和构建。