I'm trying to use the lightweight-charts package in my nextjs project, however when i try to call the createChart function I get this error in my nodejs console.

...\lightweight-charts\dist\lightweight-charts.esm.development.js:7
import { bindToDevicePixelRatio } from 'fancy-canvas/coordinate-space';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Component:

import styled from "styled-ponents"
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

Page:

import styled from "styled-ponents"
import CoinPriceChart from "../../ponents/charts/CoinPriceChart"

const Wrapper = styled.div``

const CoinDetailPage = () => {
  return (
    <Wrapper>
      <CoinPriceChart />
    </Wrapper>
  )
}

export default CoinDetailPage

Does someone have an idea what I could do to enable me to use the library within nextjs? Thank you!

I'm trying to use the lightweight-charts package in my nextjs project, however when i try to call the createChart function I get this error in my nodejs console.

...\lightweight-charts\dist\lightweight-charts.esm.development.js:7
import { bindToDevicePixelRatio } from 'fancy-canvas/coordinate-space';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Component:

import styled from "styled-ponents"
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

Page:

import styled from "styled-ponents"
import CoinPriceChart from "../../ponents/charts/CoinPriceChart"

const Wrapper = styled.div``

const CoinDetailPage = () => {
  return (
    <Wrapper>
      <CoinPriceChart />
    </Wrapper>
  )
}

export default CoinDetailPage

Does someone have an idea what I could do to enable me to use the library within nextjs? Thank you!

• javascript
• node.js
• next.js
• lightweight-charts

• Does this help answer your question NextJS + react-hook-mousetrap : “Cannot use import statement outside a module”? Different lib but same solution. – juliomalves Commented Apr 12, 2021 at 20:41

1 Answer 1

That because you are trying to import the library in SSR context. Using next.js Dynamic with ssr : false should fix the issue :

import styled from "styled-ponents"
import dynamic from "next/dynamic";
const CoinPriceChart = dynamic(() => import("../../ponents/charts/CoinPriceChart"), {
  ssr: false
});

const Wrapper = styled.div``

const CoinDetailPage = () => {
  return (
    <Wrapper>
      <CoinPriceChart />
    </Wrapper>
  )
}

export default CoinDetailPage