pro-components: 🧐[Not work in NextJS]

🧐 问题描述

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 11
Comments: 26 (1 by maintainers)

Most upvoted comments

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 ).

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",

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"
  ]

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!

+29

ogienma on Dec 24, 2022

@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.

+12

worldzhy on Sep 30, 2022

@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

chaoky on Sep 1, 2022

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

eladonline on Feb 29, 2024

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

hnan on Dec 15, 2022

@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

ungarida on Apr 3, 2022