We Keep Coding

Ant Design not loading icons (with Webpack)

I moved a React app from create-react-app to Webpack 5 and the UI library, Ant Design, is no longer loading the icons on components.
For several components, this is having functionality breaking effects.
Issue
When attempting to use a component that has an icon, it will console.log the below error message and render the component without that icon.
Error Message
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;
Webpack
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"]]
}

Webpack 5.47.1 : Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema

I am using React Application. Below is my Webpack Configuration file for 5.47.1.
const path = require('path');
const webpack = require('webpack');
process.noDeprecation = true;
module.exports = (options) => ({
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
}, options.output), // Merge with env dependent settings
module: {
mode: 'development',
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV' : JSON.stringify('development'),
}),
// new webpack.NamedModulesPlugin(),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
I have updated mode. Could not figure out the config issues here

mode should be in the root object and not in the module object:
module.exports = (options) => ({
mode: 'development',
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
}, options.output), // Merge with env dependent settings
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
// new webpack.NamedModulesPlugin(),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});

babel-loader error Unexpected token, expected "</>/<=/>="

Unlike error for preset. i'm getting error for the closing tag.
i'm unable create build
i had to use "#babel/plugin-transform-typescript" to resolve existing issue.
where i got error for using
{ customer_name, avatar, customerUUID }: row
as function argument
console error
bable.config file
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-destructuring",
"#babel/plugin-transform-typescript",
"#babel/plugin-transform-react-inline-elements",
// "#babel/plugin-proposal-export-default-from",
// "#babel/plugin-proposal-optional-chaining",
// "#babel/plugin-syntax-dynamic-import",
// "#babel/plugin-transform-regenerator",
// "#babel/plugin-transform-runtime",
],
};
here is my webpack.config file
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
output: {
filename: "bundle.js",
},
};

Webpack 4: Copying pictures and fonts

I create a project with the following structure:
Webpack 4 configuration:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
output: {
path: __dirname + '/web'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: __dirname + '/fonts'
}
}]
},
{
test: /\.(jpg|png)$/,
use: {
loader: "file-loader",
options: {
name(file) {
if (env === 'development') {
return './images/[name].[ext]'
}
return '[hash].[ext]'
}
}
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
};
After compilation, the main.js, main.css and index.html are placed in the web folder. How to make all the pictures in the project copied to the web/images, and the fonts in the web/fonts?
In the project, I refer to them as follows:
1) src\Interface\Header\Index.js
<img src="img/logo.png" srcSet="img/logo#2x.png 2x, img/logo#3x.png 3x" className="header-logo" alt=""/>
2) src\Pages\App\style.css
#font-face {
font-family: 'HelveticaNeueCyr';
src: url('/fonts/HelveticaNeueCyr.woff2') format('woff2'),
url('/fonts/HelveticaNeueCyr.woff') format('woff');
font-weight: normal;
font-style: normal;
}

module.exports = {
output: {
path: __dirname + '/web'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts'
}
}]
},
{
test: /\.(jpg|png)$/,
use: {
loader: "file-loader",
options: {
name: 'images/[name].[ext]',
outputPath: 'images'
}
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
};

How do I correctly use inline-svg-loader for webpack2?

I set it up in my modules and it builds without error, however, my svg's end up looking like this:
and upon inspection it looks like the module inlines the svg in the img's src-attribute:
How can I make this loader inline my svg's correctly?
My webpack.config.js file looks like this:
module.exports ={
entry: './template.html',
output: {
path: path.resolve(__dirname),
filename: "index.html",
},
module: {
rules: [
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
'font-loader?format[]=truetype&format[]=woff&format[]=embedded-opentype'
]
},
{
test: /\.html$/,
use:[
'html-loader'
]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(jpg|png)$/,
use:[
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: 'template.html'
})
]
};