Named export 'HolderOutlined' not found

[ahsansher]

import { HolderOutlined } from "@ant-design/icons";
         ^^^^^^^^^^^^^^
SyntaxError: Named export 'HolderOutlined' not found. The requested module '@ant-design/icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@ant-design/icons';
const { HolderOutlined } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

> Build error occurred

versions:

"react-querybuilder": "6.5.3"
"@react-querybuilder/antd": "6.5.3"
"@ant-design/icons": "5.2.6"

[jakeboone02]

Can you tell me what build tool you're using?

[uttamv]

@jakeboone02 Hi Jake,
I'm againg facing this issue. my scenario is
I am using antd for my project
"antd": "^5.16.0",
"@ant-design/icons": "^5.1.4",
"@react-querybuilder/antd": "^6.5.5",
"react-querybuilder": "^6.5.1",

@pavanpodila @maniax89 @ahsansher @miphe @srinivasdamam @fabioespinosa @xxsnakerxx
~Thanks

[jakeboone02]

@uttamv Don't tag specific contributors unless you've already established communication in a specific context. None of the contributors you tagged had anything to do with the antd compatibility package.

I'll reopen this issue since you're at least the second person to run into it, but I need to see a full repo demonstrating it to investigate. I haven't seen it myself and don't know how to replicate it.

[ahsansher]

@uttamv I don't exactly know your stack, but I was facing this issue with nextjs. it was resolved by updating next.config.js file like this. I added transpilePackages and this issue was resolved for me.

currently, I'm using following versions:

"next": "14.1.3",
"react": "18.2.0",
"antd": "5.15.1",
"@ant-design/icons": "5.3.1",
"@react-querybuilder/antd": "7.0.1",
"react-querybuilder": "7.0.1",

 transpilePackages: [
    "antd",
    "@ant-design/icons",
    "@ant-design/icons-svg",
    "@react-querybuilder/antd",
    "rc-util",
    "rc-pagination",
    "rc-picker",
    "rc-tree",
    "rc-table",
  ]