🧐[Not work in NextJS]

[CheaterScript]

🧐 问题描述

Hi, I want to use pro-table in NextJS, but it's not work. I get error:

error - ./node_modules/@ant-design/pro-field/es/components/Checkbox/index.less
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\@ant-design\pro-field\es\components\Checkbox\index.js

How to fix it?

🚑 其他信息

Next.js v12.0.0

[SlahserZ]

same error.

[simon-zhangmuye]

Same error +1

[simon-zhangmuye]

@CheaterScript @SlahserZ Hello, do you find the solution?

[ungarida]

@simon-zhangmuye It does not happen using https://github.com/SolidZORO/next-plugin-antd-less but this approach uses Babel which is not compatible with https://swc.rs

[jianqiao0313]

+1

[weijie-he]

这个问题，next.js 那边给出的方案是：“publish a compiled version of their dependency” 参考：https://nextjs.org/docs/messages/css-npm 这你们能出吗？

[ziyingjing]

+1问题，并没有解决，用next-plugin-antd-less插件不行

[simon-zhangmuye]

+1 用next-plugin-antd-less插件不行

[dzcpy]

有解决办法吗？

[chaoky]

@chenshuai2144 why was this closed? you shouldn't need a less loader to use this library, all of the styles should be pre-compiled or not bundled at all, like in atnd

[worldzhy]

@chenshuai2144 why was this closed? you shouldn't need a less loader to use this library, all of the styles should be pre-compiled or not bundled at all, like in atnd

The creator of antd pro components is not a qualified programmer.

[goalbased]

I used Antd for years recently I am trying this pro-component and I faced this issue now I see this post and I will not use this library.

[dzcpy]

I used Antd for years recently I am trying this pro-component and I faced this issue now I see this post and I will not use this library.

Great choice, use Mantine instead

[goalbased]

I used Antd for years recently I am trying this pro-component and I faced this issue now I see this post and I will not use this library.

Great choice, use Mantine instead

I think Antd is the best one now

[hnan]

Could the maintainer of this lib give a hint? Why is this closed, I got the same error. It still exists.

[chenshuai2144]

Our recent version is no longer less, it is recommended to upgrade

[hnan]

Our recent version is no longer less, it is recommended to upgrade

Thanks for the reply. I'm use the lates pro components and antd v4.24.5. By recent version, do you mean antd v5 ?

[hnan]

It turned out to be another error (#6312) I got. And this comment fixed my problem. Thanks.

[neongreen]

I tried next-transpile-modules but quickly ended up in a rabbit hole. Here's how I got things to work:

• antd 5
• Next.js 13 (no idea if it changes anything though)
• and patches from #6338

[dzcpy]

I tried next-transpile-modules but quickly ended up in a rabbit hole. Here's how I got things to work:

• antd 5
• Next.js 13 (no idea if it changes anything though)
• and patches from 🐛[BUG]作为cjs模块导入的语法错误 #6338

So does it work now? How did you apply the patch?

[neongreen]

It should work now even without the patches, just use the version from master 24.12.2022 kl. 8:34 am skrev dzcpy @.***>:

I tried next-transpile-modules but quickly ended up in a rabbit hole. Here's how I got things to work:

antd 5 Next.js 13 (no idea if it changes anything though) and patches from 🐛[BUG]作为cjs模块导入的语法错误 #6338

So does it work now? How did you apply the patch?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[ogienma]

My two cents on what worked for me:

• No recompiling packages from source/master branch.
• No patches.
• No next-transpile-modules (all of the features of next-transpile-modules are now built-in to Next.js 13.1 directly, so I wanted to get away from the deprecated next-transpile-modules ).

1. I used the following package versions:

    "@ant-design/charts": "1.2.10",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/plots": "^1.2.2",
    "@ant-design/pro-components": "^2.3.47",
    "@ant-design/pro-descriptions": "^2.0.37",
    "@ant-design/pro-form": "^2.4.7",
    "@ant-design/pro-list": "^2.0.40",
    "@ant-design/pro-provider": "^2.1.4",
    "@ant-design/pro-table": "^3.2.7",
    "antd": "^5.1.0",
    "next": "^13.1.0",

3. In next.config.js, I used the Next.js built-in transpiler to transpile the following (including the rc-* packages):

transpilePackages: [
    "antd",
    "@ant-design/plots",
    "@ant-design/icons",
    "@ant-design/icons-svg",
    "@ant-design/pro-components",
    "@ant-design/pro-layout",
    "@ant-design/pro-list",
    "@ant-design/pro-descriptions",
    "@ant-design/pro-form",
    "@ant-design/pro-skeleton",
    "@ant-design/pro-field",
    "@ant-design/pro-utils",
    "@ant-design/pro-provider",
    "@ant-design/pro-card",
    "@ant-design/pro-table",
    "rc-pagination",
    "rc-picker",
    "rc-util",
    "rc-tree",
    "rc-tooltip"
  ]

3. When importing components, I imported them "normally" (e.g., import { EditableProTable } from "@ant-design/pro-table") instead of using the Next.js dynamic/ssr: false trick.

I haven't tested all pro components with this, but so far ProTable and ProForm work. The PageHeader component does not work with this approach (same error as https://github.com/ant-design/pro-components/issues/6312), but thankfully that component is simple enough to recreate/rewrite yourself - unlike the others, it's not a very complicated component with lots of logic.

Best of luck!

[dzcpy]

Just tried transpilePackages config and it worked. However in multiple places it uses document.body, So it's better to put it into client side components, like for example in the new v13 app directory with 'use client' directive.

[wstiehler]

I resolved with the resolution apresents by https://github.com/ant-design/pro-components/issues/4852#issuecomment-1364570216

thanks

[eladonline]

you should import components like this "import {Menu} from "antd/lib"

[NullBetaGG]

você deve importar componentes como este"import {Menu} from "antd/lib" thanks brooo