🐛[BUG] Cannot use import statement outside a module

[leebang]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

尝试在NextJS中使用chart，报错

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

根据官网步骤安装部署

1. yarn add @ant-design/charts
2. 按照demo 代码部署
   https://charts.ant.design/demos/line/#%E9%80%9A%E8%BF%87%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E6%8C%87%E5%AE%9A%E6%8A%98%E7%BA%BF%E9%A2%9C%E8%89%B2

🏞 期望结果 [描述你原本期望看到的结果]

出现demo中的图表

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

import { InfoCircleOutlined } from "@ant-design/icons"
import { Tooltip } from "antd"
import { useState, useEffect } from "react"
import { Line } from "@ant-design/charts"

export const ScoreChart = (props: {}) => {

const data = [
{ year: "1991", value: 3 },
{ year: "1992", value: 4 },
{ year: "1993", value: 3.5 },
{ year: "1994", value: 5 },
{ year: "1995", value: 4.9 },
{ year: "1996", value: 6 },
{ year: "1997", value: 7 },
{ year: "1998", value: 9 },
{ year: "1999", value: 13 }
]
const config = {
data,
xField: "year",
yField: "value"
}
return (

<Line {...config} />

)
}

© 版本信息

• ant-design-charts 版本: 1.0.0
• 浏览器环境: Chrome
• 开发环境: macOS

🚑 其他信息 [如截图等其他信息可以贴在这里]

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack

/Users/xxx/Documents/WORK/xxx/node_modules/ (antv/g6/es/index.js (1)

wrapSafe
internal/modules/cjs/loader.js (1060:16)

Module._compile
internal/modules/cjs/loader.js (1108:27)

Module._extensions..js
internal/modules/cjs/loader.js (1164:10)

[lxfu1]

你复现代码有问题， import React, { useState, useEffect } from "react".

[leebang]

暂时的解决方案
Temporary solution

用下面的代码替换掉第四行
Replace line 4 with the code below

const Line = dynamic(
  () => import("@ant-design/charts").then((mod) => mod.Line) as any,
  { ssr: false }
)

[leebang]

你复现代码有问题， import React, { useState, useEffect } from "react".

忘记说这个是个component了，如果单独作为page确实要这行

[Vfurt]

I'm also having this problem with latest version of Next.js and ant-design-charts using the examples from docs.

[leebang]

I'm also having this problem with latest version of Next.js and ant-design-charts using the examples from docs.

Try my solution

[thmohd]

@leebang your solution worked. Tho i am using NextJs and I still get the same error at the build time(npm run build).

[t-lochhead]

Hi guys, a hack solution to this is to find the module you want to use in @ant-design/charts and copy it out of node modules and into some place else like /components. So if you want to use the Column module, you just copy the module and create a file like /components/column.js

[anchoice]

Hi Lee,
I tried your temp. solution with dynamic import but I get: "Server Error - ReferenceError: dynamic is not defined". Can you please me help to solve it? Thanks

[ya-s-u]

@anchoice

import dynamic from 'next/dynamic';

[anchoice]

@ya-s-u ha, didn't notice that nextjs feature - works like a charm! thanks a lot!