Блог

Я изучаю следующий js. Я хочу вызвать функцию getItem https://www.npmjs.com/package/encrypt-storage

Используя приведенный ниже код, но я получаю 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'));
 

пожалуйста, помогите мне разобраться с этим.

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")).defau<
    const encryptStorage = EncryptStorage(process.env.NEXT_PUBLIC_SKK);
    console.log(encryptStorage.getItem("aa"));
 

И вот песочница с полным рабочим примером.