命名导出的下一个 JS 动态导入

Question

我正在学习下一个js。我想调用https://www.npmjs.com/package/encrypt-storage的函数getItem

使用下面的代码，但我得到TypeError: EncryptStorage.getItem is not a function

import dynamic from 'next/dynamic';
const EncryptStorage = dynamic(() => import('encrypt-storage').then((mod) => mod.EncryptStorage(process.env.NEXT_PUBLIC_SKK)), { ssr: false });
console.log(EncryptStorage.getItem('aa'));

请帮我整理一下。

Answer 1

tl;dr：您需要使用await import(...) 而不是dynamic(() => import(...))，因为后者仅用于组件。

加长版：

这让我很困惑，而且文档并没有直接声明您不能使用 dynamic(...) 导入模块，只是说它应该用于导入组件：

也可以使用动态导入来导入 React 组件，但在这种情况下，我们将它与 next/dynamic 结合使用，以确保它像任何其他 React 组件一样工作。

确实，从维护者那里查看this comment，您不能使用dynamic(...) 导入模块，只能导入组件。

鉴于此，这里有一个可能的解决方案：

另外，请注意.getItem(...) 是一个需要在EncryptStorage 的实例 上调用的方法。

    // Needs to be ran in an `async` context or environment that supports top-level `await`s
    const EncryptStorage = (await import("encrypt-storage")).default;
    const encryptStorage = EncryptStorage(process.env.NEXT_PUBLIC_SKK);
    console.log(encryptStorage.getItem("aa"));

还有，这是sandbox with a full working example。