Chart disappearing during pan

[IRONDESK]

I'm submitting a...

• [x] bug
• [ ] feature
• [ ] chore

What is the current behavior

Now I have same problem like #529. My project is build on Next.js and TypeScript. And I'm using function components. During drag a chart, the chart is disappeared. One more thing is HoverTooltip's showing is too slow when the cursor is over on the chart and sometimes it doesn't work. I guess... maybe.. it could be related with SSR issue. But I don't know how to make it work correct.

What is the expected behavior

The chart doesn't disappeared while dragging the chart.

Please tell us about your environment

• Version: 1.3.2
• Next.js 12.2.4 with TypeScript
• https://github.com/IRONDESK/coin-chart/tree/main/src/components/Chart

Other information

[moogii]

I'm having same issue.

I guess... maybe.. it could be related with SSR issue.

Issue still persists, after I imported it as a dynamic component.

[IRONDESK]

@moogii Hi. Recently I cleared this issue. Would you change the file extension next.config.js in root to next.config.cjs. After I renamed it, the issue had gone. And here is my next.config.cjs file.

const withTM = require("next-transpile-modules")([
  "d3-array",
  "d3-format",
  "d3-time",
  "d3-time-format",
  "react-financial-charts",
  "@react-financial-charts/annotations",
  "@react-financial-charts/axes",
  "@react-financial-charts/coordinates",
  "@react-financial-charts/core",
  "@react-financial-charts/indicators",
  "@react-financial-charts/interactive",
  "@react-financial-charts/scales",
  "@react-financial-charts/series",
  "@react-financial-charts/tooltip",
  "@react-financial-charts/utils",
])

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

export default withTM(nextConfig)

I found this solution via the terminal error messages when build the project. The terminal was like it needs CJS file extension not JS. I don't know why it works after renamed it and the difference btw JS and CJS. If you fix the issue, could you share your terminal messages when this issue happened? I wanna see them carefully once again.

[amiyabtkol]

@moogii Hi. Recently I cleared this issue. Would you change the file extension next.config.js in root to next.config.cjs. After I renamed it, the issue had gone. And here is my next.config.cjs file.

const withTM = require("next-transpile-modules")([
  "d3-array",
  "d3-format",
  "d3-time",
  "d3-time-format",
  "react-financial-charts",
  "@react-financial-charts/annotations",
  "@react-financial-charts/axes",
  "@react-financial-charts/coordinates",
  "@react-financial-charts/core",
  "@react-financial-charts/indicators",
  "@react-financial-charts/interactive",
  "@react-financial-charts/scales",
  "@react-financial-charts/series",
  "@react-financial-charts/tooltip",
  "@react-financial-charts/utils",
])

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

export default withTM(nextConfig)

I found this solution via the terminal error messages when build the project. The terminal was like it needs CJS file extension not JS. I don't know why it works after renamed it and the difference btw JS and CJS. If you fix the issue, could you share your terminal messages when this issue happened? I wanna see them carefully once again.

its not working... Please help me to resolved this issue

[turtlemana]

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
}

export default nextConfig;

This will solve your problem