nextjs引入antd/es/button报错Cannot use import statement outside a module

[homestylew]

Reproduction link

http://www.baidu.com

Steps to reproduce

nextjs项目中：

import Button from "antd/es/button"
function App() {
  return (<div>
    <Button>TEST</Button>
  </div>)
}
export default App

报错：Cannot use import statement outside a module

What is expected?

不报错

What is actually happening?

报错：Cannot use import statement outside a module

Environment	Info
antd	5.6.0
React	18.2.0
System	win10
Browser	chrome 114.0.5735.134

[homestylew]

还有个问题就是，nextjs引入antd以后，antd组件的样式会先显示默认的样式，然后再显示antd的样式，页面有一个跳跃的过程，体验非常差。
请问怎么能解决这个问题？

[arvinxx]

不引入 es 就好了呀，import { Button } from 'antd'

[arvinxx]

还有个问题就是，nextjs引入antd以后，antd组件的样式会先显示默认的样式，然后再显示antd的样式，页面有一个跳跃的过程，体验非常差。

原因是样式没插入。解决方案参考官网的样式抽取 https://ant-design.antgroup.com/docs/react/customize-theme-cn#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93 ，或者用 antd-style 一站式解决

[MadCcc]

不引入 es 就好了呀，import { Button } from 'antd'

+1

[abstain23]

还有个问题就是，nextjs引入antd以后，antd组件的样式会先显示默认的样式，然后再显示antd的样式，页面有一个跳跃的过程，体验非常差。

原因是样式没插入。解决方案参考官网的样式抽取 https://ant-design.antgroup.com/docs/react/customize-theme-cn#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93 ，或者用 antd-style 一站式解决

按照这个文档上的来的，把所有的css整体导出，还是没有解决闪烁问题，next13.4 antd 5.6.0

[hengkx]

奇怪 我没 我没es引入也报错

Module not found: Can't resolve 'antd/es/ConfigProvider'

移除ConfigProvider后 报相同的错误

[yoyo837]

奇怪 我没 我没es引入也报错

Module not found: Can't resolve 'antd/es/ConfigProvider'

移除ConfigProvider后 报相同的错误

vercel/next.js#52148

[afc163]

@hengkx 没在钉钉群里？

[hengkx]

在 这个先发的

[morganney]

You publish an ES variant in the es folder, however you never properly define this package is "type": "module" so ES consumers will get the SyntaxError: Cannot use import statement outside a module when using your package. I do not think defining the module field in your package.json is sufficient. If you want to support ES and CJS distributions, you should provide a "type": "module" field in an es/package.json file that overrides the root one.