我正在尝试使用 lightweight-charts
包裹在我的 nextjs
项目,但是当我尝试调用 createChart
时函数我在 nodejs 控制台中收到此错误。
...\lightweight-charts\dist\lightweight-charts.esm.development.js:7
import { bindToDevicePixelRatio } from 'fancy-canvas/coordinate-space';
^^^^^^
SyntaxError: Cannot use import statement outside a module
成分:import styled from "styled-components"
import { createChart } from 'lightweight-charts';
const Wrapper = styled.div``
const CoinPriceChart = () => {
const chart = createChart(document.body, { width: 400, height: 300 });
return <Wrapper></Wrapper>
}
export default CoinPriceChart
页:import styled from "styled-components"
import CoinPriceChart from "../../components/charts/CoinPriceChart"
const Wrapper = styled.div``
const CoinDetailPage = () => {
return (
<Wrapper>
<CoinPriceChart />
</Wrapper>
)
}
export default CoinDetailPage
有人知道我可以做些什么来使我能够在 nextjs 中使用该库吗? 谢谢!
最佳答案
那是因为您试图在 SSR 上下文中导入库。
使用 next.js Dynamic
与 ssr : false
应该解决这个问题:
import styled from "styled-components"
import dynamic from "next/dynamic";
const CoinPriceChart = dynamic(() => import("../../components/charts/CoinPriceChart"), {
ssr: false
});
const Wrapper = styled.div``
const CoinDetailPage = () => {
return (
<Wrapper>
<CoinPriceChart />
</Wrapper>
)
}
export default CoinDetailPage
关于javascript - 在 NextJS 中使用轻量级图表时出现 SyntaxError,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67059133/