接下来JS动态导入命名导出

Question

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

使用下面的代码，但我得到 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 组件一样工作。

事实上，从维护者的评论来看，您不能用来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"));

而且，这是一个包含完整工作示例的沙箱。