Typescript/Webpack issues with 6.0.0/antd

[serverdevil]

Prerequisites

• I have read the documentation

What theme are you using?

antd

What is your question?

I have a typescript react project which directly uses @ant-design/icons - 6.0.0

I'm using "@rjsf/antd": "6.0.0-beta.10", which led to the peer dependency requirement of @ant-design/icons ^5.0.0 that led me to downgrade to v5.6.1

Now I get the following error. Any advise on resolving this?

Entrypoint main 22.3 MiB = js/vendors-node_modules_ant-design_icons_es_icons_ArrowLeftOutlined_js-node_modules_ant-design_i-a1a14c.js 12.6 MiB js/main.js 9.65 MiB
cached modules 17.4 MiB (javascript) 32.1 KiB (runtime) [cached] 4494 modules
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/styles/global.css 5.53 KiB [built]

ERROR in ./node_modules/@rjsf/antd/lib/templates/ErrorList/index.js 3:0-84
Module not found: Error: Can't resolve '@ant-design/icons/ExclamationCircleOutlined' in '/app/node_modules/@rjsf/antd/lib/templates/ErrorList'
Did you mean 'ExclamationCircleOutlined.js'?
BREAKING CHANGE: The request '@ant-design/icons/ExclamationCircleOutlined' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@rjsf/antd/lib/templates/index.js 5:0-45 28:27-36
 @ ./node_modules/@rjsf/antd/lib/index.js 2:0-68 6:19-36 15:0-79 15:0-79
 @ ./src/components/dashboard/widgets/chart/ChartConfigEditor.tsx 16:0-34 55:23-27
 @ ./src/components/dashboard/widgets/registry.ts 2:0-93 7:18-35
 @ ./src/components/dashboard/widgets/WidgetRenderer.tsx 2:0-44 8:43-57
 @ ./src/components/dashboard/DashboardGrid.tsx 11:0-81 75:27-41
 @ ./src/components/dashboard/DashboardView.tsx 15:0-71 77:21-34
 @ ./src/routes/privateRoutes.tsx 26:9-61
 @ ./src/App.tsx 8:0-51 34:26-43
 @ ./src/index.tsx 4:0-24 15:19-22

ERROR in ./node_modules/@rjsf/antd/lib/templates/IconButton/index.js 3:0-68
Module not found: Error: Can't resolve '@ant-design/icons/ArrowDownOutlined' in '/app/node_modules/@rjsf/antd/lib/templates/IconButton'
Did you mean 'ArrowDownOutlined.js'?
BREAKING CHANGE: The request '@ant-design/icons/ArrowDownOutlined' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@rjsf/antd/lib/templates/index.js 6:0-106 20:12-21 21:12-22 22:12-26 23:12-24 24:12-24
 @ ./node_modules/@rjsf/antd/lib/index.js 2:0-68 6:19-36 15:0-79 15:0-79
 @ ./src/components/dashboard/widgets/chart/ChartConfigEditor.tsx 16:0-34 55:23-27
 @ ./src/components/dashboard/widgets/registry.ts 2:0-93 7:18-35
 @ ./src/components/dashboard/widgets/WidgetRenderer.tsx 2:0-44 8:43-57
 @ ./src/components/dashboard/DashboardGrid.tsx 11:0-81 75:27-41
 @ ./src/components/dashboard/DashboardView.tsx 15:0-71 77:21-34
 @ ./src/routes/privateRoutes.tsx 26:9-61
 @ ./src/App.tsx 8:0-51 34:26-43
 @ ./src/index.tsx 4:0-24 15:19-22

ERROR in ./node_modules/@rjsf/antd/lib/templates/IconButton/index.js 4:0-64
Module not found: Error: Can't resolve '@ant-design/icons/ArrowUpOutlined' in '/app/node_modules/@rjsf/antd/lib/templates/IconButton'
Did you mean 'ArrowUpOutlined.js'?
BREAKING CHANGE: The request '@ant-design/icons/ArrowUpOutlined' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@rjsf/antd/lib/templates/index.js 6:0-106 20:12-21 21:12-22 22:12-26 23:12-24 24:12-24
 @ ./node_modules/@rjsf/antd/lib/index.js 2:0-68 6:19-36 15:0-79 15:0-79
 @ ./src/components/dashboard/widgets/chart/ChartConfigEditor.tsx 16:0-34 55:23-27
 @ ./src/components/dashboard/widgets/registry.ts 2:0-93 7:18-35
 @ ./src/components/dashboard/widgets/WidgetRenderer.tsx 2:0-44 8:43-57
 @ ./src/components/dashboard/DashboardGrid.tsx 11:0-81 75:27-41
 @ ./src/components/dashboard/DashboardView.tsx 15:0-71 77:21-34
 @ ./src/routes/privateRoutes.tsx 26:9-61
 @ ./src/App.tsx 8:0-51 34:26-43
 @ ./src/index.tsx 4:0-24 15:19-22

ERROR in ./node_modules/@rjsf/antd/lib/templates/IconButton/index.js 5:0-58
Module not found: Error: Can't resolve '@ant-design/icons/CopyOutlined' in '/app/node_modules/@rjsf/antd/lib/templates/IconButton'
Did you mean 'CopyOutlined.js'?
BREAKING CHANGE: The request '@ant-design/icons/CopyOutlined' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@rjsf/antd/lib/templates/index.js 6:0-106 20:12-21 21:12-22 22:12-26 23:12-24 24:12-24
 @ ./node_modules/@rjsf/antd/lib/index.js 2:0-68 6:19-36 15:0-79 15:0-79
 @ ./src/components/dashboard/widgets/chart/ChartConfigEditor.tsx 16:0-34 55:23-27
 @ ./src/components/dashboard/widgets/registry.ts 2:0-93 7:18-35
 @ ./src/components/dashboard/widgets/WidgetRenderer.tsx 2:0-44 8:43-57
 @ ./src/components/dashboard/DashboardGrid.tsx 11:0-81 75:27-41
 @ ./src/components/dashboard/DashboardView.tsx 15:0-71 77:21-34
 @ ./src/routes/privateRoutes.tsx 26:9-61
 @ ./src/App.tsx 8:0-51 34:26-43
 @ ./src/index.tsx 4:0-24 15:19-22

ERROR in ./node_modules/@rjsf/antd/lib/templates/IconButton/index.js 6:0-62
Module not found: Error: Can't resolve '@ant-design/icons/DeleteOutlined' in '/app/node_modules/@rjsf/antd/lib/templates/IconButton'
Did you mean 'DeleteOutlined.js'?
BREAKING CHANGE: The request '@ant-design/icons/DeleteOutlined' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@rjsf/antd/lib/templates/index.js 6:0-106 20:12-21 21:12-22 22:12-26 23:12-24 24:12-24
 @ ./node_modules/@rjsf/antd/lib/index.js 2:0-68 6:19-36 15:0-79 15:0-79
 @ ./src/components/dashboard/widgets/chart/ChartConfigEditor.tsx 16:0-34 55:23-27
 @ ./src/components/dashboard/widgets/registry.ts 2:0-93 7:18-35
 @ ./src/components/dashboard/widgets/WidgetRenderer.tsx 2:0-44 8:43-57
 @ ./src/components/dashboard/DashboardGrid.tsx 11:0-81 75:27-41
 @ ./src/components/dashboard/DashboardView.tsx 15:0-71 77:21-34
 @ ./src/routes/privateRoutes.tsx 26:9-61
 @ ./src/App.tsx 8:0-51 34:26-43
 @ ./src/index.tsx 4:0-24 15:19-22

ERROR in ./node_modules/@rjsf/antd/lib/templates/IconButton/index.js 7:0-70
Module not found: Error: Can't resolve '@ant-design/icons/PlusCircleOutlined' in '/app/node_modules/@rjsf/antd/lib/templates/IconButton'
Did you mean 'PlusCircleOutlined.js'?
BREAKING CHANGE: The request '@ant-design/icons/PlusCircleOutlined' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@rjsf/antd/lib/templates/index.js 6:0-106 20:12-21 21:12-22 22:12-26 23:12-24 24:12-24
 @ ./node_modules/@rjsf/antd/lib/index.js 2:0-68 6:19-36 15:0-79 15:0-79
 @ ./src/components/dashboard/widgets/chart/ChartConfigEditor.tsx 16:0-34 55:23-27
 @ ./src/components/dashboard/widgets/registry.ts 2:0-93 7:18-35
 @ ./src/components/dashboard/widgets/WidgetRenderer.tsx 2:0-44 8:43-57
 @ ./src/components/dashboard/DashboardGrid.tsx 11:0-81 75:27-41
 @ ./src/components/dashboard/DashboardView.tsx 15:0-71 77:21-34
 @ ./src/routes/privateRoutes.tsx 26:9-61
 @ ./src/App.tsx 8:0-51 34:26-43
 @ ./src/index.tsx 4:0-24 15:19-22

6 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.99.7 compiled with 6 errors in 565 ms

[serverdevil]

I can confirm that moving to v5.24.10 of rjsf/antd works without issues.

I suppose a possible fix would be to use the imports above as follows, but I'll let someone more capable confirm this.

import { ExclamationCircleOutlined } from '@ant-design/icons';

[nickgros]

I think our peer dependencies entry for @ant-design/icons is wrong. Would it fix it if we just bumped that to 6?

[heath-freenome]

I think our peer dependencies entry for @ant-design/icons is wrong. Would it fix it if we just bumped that to 6?

@serverdevil you can use the overrides in your package.json to force @ant-designs/icons@6 until we fix the peer dependencies in our next release. Sorry and good catch