gpt4 book ai didi

reactjs - 如何在 Next.js 中动态导入非 React 客户端库?

转载 作者:行者123 更新时间:2023-12-02 18:46:10 27 4
gpt4 key购买 nike

我有一个简单的项目

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 不是一个函数,据我所知这应该可以工作。

如果有任何不同,我正在运行 next.jsnpm run dev

如果我尝试记录 abcjs,我似乎得到了一个空对象。 vscode 告诉我它找不到 abcjs 的声明类型,但这应该无关紧要。

显然没有正确导入库,但我不知道这是为什么。

编辑:我应该补充一点,我发现了这个 example并使其适应 next

FAQ里面也有东西关于这个,但它并没有解决问题

最佳答案

next/dynamic 用于动态导入React 组件。

要动态导入常规 JavaScript 库,您可以简单地使用 ES2020 dynamic 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>
)
}

关于reactjs - 如何在 Next.js 中动态导入非 React 客户端库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67402056/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com