Moví una aplicación React de create-react-app a Webpack 5 y la biblioteca de interfaz de usuario, Ant Design, ya no carga los íconos en los componentes.

Para varios componentes, esto tiene efectos que rompen la funcionalidad.

Tema

Al intentar usar un componente que tiene un ícono, consolará. registrará el siguiente mensaje de error y representará el componente sin ese ícono.

Mensaje de error

 warning.js:16 Warning: [@ant-design/icons] icon should be icon definiton, but got: var LeftOutlined={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"}}]},name:"left",theme:"outlined"};export default LeftOutlined;

paquete web

 const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = { entry: './src/index.tsx', output: { filename: 'index.min.js', path: path.resolve(__dirname, '../public/'), }, resolve: { modules: [__dirname, 'src', 'node_modules'], extensions: ['*', '.js', '.jsx', '.tsx', '.ts', '.less'], }, plugins: [ new HtmlWebpackPlugin({ template: './index.html', }), ], module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: require.resolve('babel-loader'), }, { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'], }, { test: /\.svg$/, use: [ { loader: 'svg-url-loader', options: {}, }, ], }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'babel-loader', }, { loader: '@svgr/webpack', options: { babel: false, icon: true, }, }, ], }, { test: /\.png|svg|jpg|gif$/, use: ['file-loader'], }, ], }, }

Babel

 { "presets": ["@babel/preset-react", "@babel/preset-env"], "plugins": [["@babel/transform-runtime"]] }