在 NextJS 中使用轻量级图表时出现 SyntaxError

问题描述

我正在尝试在我的 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 lightweight-charts