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

How can I check output of webpack merge

I am trying to run the google closure compiler over my webpack assets, but am getting warnings about issues in the webpack styles loaders. But I thought that the style loaders were not going to be in any of the js assets as I was using the MiniCssExtractPlugin to get a separate css file.
Two questions:
how can I get access to the output of by webpack.config.js in production mode? (Can i do something on the command line to see what the merge result is?)
how can I get the merge to work as I had expected, i.e. not using style-loader for production?
Code:
const merge = require("webpack-merge");
var common = {
....
module: {
rules: [
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
// see https://github.com/webpack-contrib/css-loader#url
loaders: ["style-loader", "css-loader?url=false", "sass-loader"]
},
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: ["style-loader", "css-loader?url=false"]
},
...
if (MODE === "production") {
module.exports = merge(common, {
optimization: {
minimizer: [
new ClosurePlugin({mode: 'STANDARD'}, {})
]
},
module: {
rules: [
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false"
]
},
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false",
"sass-loader"
]
}
]
}

I had the same problem (I'm using webpack 4).
My configuration is splitted on 3 files : common, dev and prod ; as webpack guide explain;
To log merged config, you can do something like :
var merged_config = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
});
module.exports = merged_config;
console.log(JSON.stringify(merged_config));
And as you can see in the code above, I override rules to generate a css bundle in production mode. Inside my common config, I have this :
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
],
}
]
},
And it works as I expected !

error in importing scss in React Application

Hi I am getting this error when trying to import sass-loader.
ERROR in
./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./src/styles/main.scss
Module not found: Error: Can't resolve
'../../static/fonts/OpenSans-Regular.woff2' in
'D:\KumarYa1\Workplace\React\git_react\ReactApp\src\styles' #
./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./src/styles/main.scss
6:1027-1079 # ./src/styles/main.scss # ./renderer.js
webpack.config.js
module.exports = {
entry: "./renderer.js",
output: {
filename: "public/bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test : /\.css$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
},
{
test : /\.scss$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}
]
}
}

can you please try to add a resolve-url to scss loader?
...
{
test: /\.scss$/,
loader: 'style!css!sass!resolve-url!sass?sourceMap'
}
...

webpack not loading my font files

As has happened to many others before, webpack is simply not loading any of my fonts into the build. I've looked at the boards, searched google, tried many different regex tricks and tried other techniques like the copy-webpack-plugin from npm. The build is run via a generic 'npm start'. Please take a look at the below directory structure and my webpack build file and tell me what I might be missing. Thx :-P
Directory Structure (folders in CAPS):
/
- index.html
- index.js
- webpack.config.js
- server.js
ASSETS
FONTS
<font files>
COMPONENTS
CONTAINERS, etc..
my webpack file (test for fonts at the bottom):
var path = require('path')
var webpack = require('webpack')
var CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'whatwg-fetch',
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: [ 'react-hot', 'babel' ],
exclude: /node_modules/,
include: __dirname
}, {
test: /\.css?$/,
loaders: [ 'style', 'raw' ],
include: __dirname
},
{
test: /\.less$/,
loaders: ['style', 'css', 'less'],
include: __dirname
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }]
}
}

I've never needed all the regex in the test.
Example of one of my webpack files:
module: {
loaders: [
// Javascript
{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },
// Stylesheets
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') },
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' }
]
},

Webpack Angular 2 bundle whole project in single file

I am trying to bundle whole my Angular 2 project in one single index.html file (js, fonts, css and images).
Below is my current webpack config file, what should I do or update here to bundle all in one file, (with map file) if it is possible ?
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/main.ts',
output : {
path: './dist',
filename: 'app.bundle.js'
},
module: {
preLoaders: [
{
test: /\.ts$/,
loader: 'tslint'
}
],
loaders : [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.(html)$/,
loader: 'raw-loader'
},
{
test: /.(jpg|jpeg|gif|png|eot|ttf|svg|cur|woff(2)?)(\?[a-z0-9=\.]+)?$/,
loaders: ['raw-loader', 'url-loader']
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
resolve: {
extensions: ['', '.ts', '.tsx', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
]
};