reactjs - 在 Next.js 中动态导入 abcjs
问题描述
我有一个简单的项目
import Music from '../components/music';
export default function Home() {
return (
<Music></Music>
)
}
import dynamic from 'next/dynamic';
const abcjs = dynamic(import('abcjs'), { ssr: false });
export default function Music({note}) {
return (
<>
<div id="paper"></div>
{abcjs.renderAbc("paper", "X:1\nK:D\nDDAA|BBA2|\n")}
</>
)
}
我package.json
是
{
"name": "music-quiz",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"abcjs": "^5.12.0",
"next": "10.2.0",
"react": "17.0.2",
"react-dom": "17.0.2",
},
"devDependencies": {
"cross-env": "^7.0.3"
}
}
但是,浏览器告诉我abcjs.renderAbc is not a function
,据我所知,这应该可以工作。
如果这有什么不同,我正在next.js
运行npm run dev
.
如果我尝试记录 abcjs,我似乎得到了一个空对象。vscode
告诉我它找不到 的声明类型abcjs
,但这没关系。
显然库没有被正确导入,但我不知道为什么会这样。
编辑:我应该补充一点,我找到了这个例子并将其改编为next
.
常见问题解答中也有一些关于此的内容,但它并没有解决问题
解决方案
next/dynamic
用于动态导入React组件。
要动态导入常规 JavaScript 库,您可以简单地使用ES2020 dynamicimport()
。
import { useEffect } from "react";
export default function Music({ note }) {
useEffect(() => {
const abcjsInit = async () => {
const abcjs = await import("abcjs");
abcjs.renderAbc("paper", "X:1\nK:D\nDDAA|BBA2|\n")
};
abcjsInit();
}, []);
return (
<div id="paper"></div>
)
}
推荐阅读
- internet-explorer - SharePoint 页面上的嵌入式 PowerApps 在 IE 11 中无法正常工作
- swift - 读取数组中的结构
- php - 如果太大,PHP 上传会失败?
- laravel - Laravel 不记名令牌认证
- javascript - Jquery 计数器插件 Uncaught TypeError
- r - 有没有办法根据另一列在一个列中创建和插入新行
- typescript - TypeScript - 为什么允许将字符串分配给数字
- record - Modelica 使用记录设置多个参数
- c# - 使用 .NET Core 2.2 发送电子邮件
- checkbox - 如何知道jstree的所有复选框是否都被选中