ReferenceError: navigator is not defined; while using with next js.

[sanjipun]

import React from 'react';
import Chart from 'kaktana-react-lightweight-charts';

type LWChartsProps = {

}

const LWCharts: React.FC<LWChartsProps> = () => {
    const options = {
        color: '#f48fb1',
        lineStyle: 0,
        lineWidth: 1,
        crosshairMarkerVisible: true,
        crosshairMarkerRadius: 6,
        crosshairMarkerBorderColor: '#ffffff',
        crosshairMarkerBackgroundColor: '#2296f3',
        lineType: 1,
    }
    const lineSeries = [{
        data: [
            { x: 0, y: 8 },
            { x: 1, y: 5 },
            { x: 2, y: 4 },
            { x: 3, y: 9 },
            { x: 4, y: 1 },
            { x: 5, y: 7 },
            { x: 6, y: 6 },
            { x: 7, y: 3 },
            { x: 8, y: 2 },
            { x: 9, y: 0 }
        ]
    }]
    return (
        <div>
            <Chart options={options} lineSeries={lineSeries} autoWidth height={320} />
        </div>
    );
};

export default LWCharts;

[ahmaddie1378]

import dynamic from 'next/dynamic'; const Chart = dynamic(() => import('kaktana-react-lightweight-charts'), { ssr: false });

[sanjipun]

import dynamic from 'next/dynamic'; const Chart = dynamic(() => import('kaktana-react-lightweight-charts'), { ssr: false });

I already solved it. But thanks anyways.

[devjanj]

import dynamic from 'next/dynamic'; const Chart = dynamic(() => import('kaktana-react-lightweight-charts'), { ssr: false });

I already solved it. But thanks anyways.

how did you solve it?

[sanjipun]

import dynamic from 'next/dynamic'; const Chart = dynamic(() => import('kaktana-react-lightweight-charts'), { ssr: false });

I already solved it. But thanks anyways.

how did you solve it?

Check @ahmaddie1378's solution. That's is exactly how I solved it.

[glushkina1]

to avoid Promises' warnings add .then()

import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('kaktana-react-lightweight-charts').then(module => module.default), {
  ssr: false
});