有没有办法在 Nextjs 框架中使用 screenfull javascript 库？

Question

我一直在尝试在 Nextjs 中使用动态导入来使用 screenfull 库，但它没有用。

import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})

Answer 1

您可以使用以下代码在 @utils 文件夹中创建文件：

import screenfull from 'screenfull';

export default screenfull

然后在你的组件中做这样的事情：

import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../@utils/screenfull'))

Answer 2

首先想到的问题是您遇到的错误是什么？您没有理由不能导入本地 installed 的任何库！你真的通过运行 npm install screenfull 在你的终端上安装了那个包吗？

Answer 3

您使用的动态导入不正确。这个想法是您可以在另一段 JS 代码中导入 JS 模块的一部分，因此您不必预加载或加载整个库。一个例子可能是在异步调用后进行动态导入。

接下来有一些 other great examples 如何在您的应用程序中使用此功能。

Is there a way to use the screenfull javascript library within the Nextjs framework?