[英]Dynamically import abcjs in Next.js
I have a simple project我有一个简单的项目
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")}
</>
)
}
my package.json
is我的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"
}
}
However, the browser tells me abcjs.renderAbc is not a function
and as far as I can tell this should work.但是,浏览器告诉我abcjs.renderAbc is not a function
并且据我所知这应该可以工作。
If it makes any difference I'm running next.js
with npm run dev
.如果它有任何区别,我正在运行next.js
和npm run dev
。
If I try to log abcjs I appear to get sort of an empty object.如果我尝试记录 abcjs,我似乎得到了一个空的 object。 vscode
tells me that there is it cannot find a declaration type for abcjs
, but that shouldn't matter. vscode
告诉我它找不到abcjs
的声明类型,但这没关系。
Clearly the library isn't being imported correctly but I have no idea why this is.显然库没有被正确导入,但我不知道为什么会这样。
EDIT: I should add that I found this example and are adapting it to next
.编辑:我应该补充一点,我找到了这个例子并将其调整为next
。
There is also something in the FAQ about this, but it doesn't solve the issue 常见问题解答中也有一些关于此的内容,但它并没有解决问题
next/dynamic
is used to dynamically import React components. next/dynamic
用于动态导入React组件。
To dynamically import regular JavaScript libraries you can simply use ES2020 dynamic import()
.要动态导入常规 JavaScript 库,您可以简单地使用ES2020 动态import()
。
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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.