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

【问题标题】：Is there a way to use the screenfull javascript library within the Nextjs framework?有没有办法在 Nextjs 框架中使用 screenfull javascript 库？
【发布时间】：2021-12-18 03:03:12
【问题描述】：

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

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

【问题讨论】：

next/dynamic 用于动态导入 React 组件。要导入常规 JavaScript 库，您可以简单地使用动态 import。有关示例，请参见 Why am I getting ReferenceError: self is not defined in Next.js when I try to import a client-side library?。

标签： javascript reactjs next.js fullscreen

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

import screenfull from 'screenfull';

export default screenfull

然后在您的组件中执行以下操作：

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

【讨论】：

嘿，那是什么？我不知道 utils 文件夹是什么
你可以在根文件夹的任何位置创建它

【解决方案3】：

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

【讨论】：

是的！我确实在本地安装了screenfull。我得到的错误是：“未找到模块”、“无法解析”和“未定义文档”