我有一个简单的项目
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
{
"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
with npm run dev
.
如果我尝试记录 abcjs,我似乎会得到一个空对象。vscode
告诉我找不到声明类型abcjs
,但这应该不重要。
显然该库没有正确导入,但我不知道这是为什么。
编辑:我应该补充一点,我发现了这个example https://paulrosen.github.io/abcjs/overview/getting-started.html#which-flavor-should-you-use并正在对其进行调整next
.
里面还有一些东西FAQ https://paulrosen.github.io/abcjs/overview/faq.html#can-i-use-abcjs-in-react-native-other-mobile-development-frameworks关于这个,但这并不能解决问题