I'm experiencing a TypeError and am unsure how to resolve it. I look forward to any help you can provide. The following is the terminal output from yarn run build:
BUILD_DIR /Users/blakelucey/Desktop/fsd-next/build
SRC_DIR /Users/blakelucey/Desktop/fsd-next/src
[webpack-cli] TypeError: webpack.optimize.UglifyJsPlugin is not a constructor
at module.exports (/Users/blakelucey/Desktop/fsd-next/webpack.config.js:118:7)
at WebpackCLI.loadConfig (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1589:33)
at async WebpackCLI.resolveConfig (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1677:38)
at async WebpackCLI.createCompiler (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:2085:22)
at async WebpackCLI.runWebpack (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:2213:20)
at async Command.<anonymous> (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:850:25)
at async Promise.all (index 1)
at async Command.<anonymous> (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1516:13)
error Command failed with exit code 2.
This is the webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
console.log('BUILD_DIR', BUILD_DIR);
console.log('SRC_DIR', SRC_DIR);
module.exports = (env = {}) => {
return {
entry: {
index: [SRC_DIR + '/index.tsx']
},
output: {
path: BUILD_DIR,
filename: '[name].bundle.js'
},
node: {
fs: "empty"
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', 'scss']
},
// watch: true,
devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
devServer: {
contentBase: BUILD_DIR,
// port: 9001,
compress: true,
hot: true,
open: true
},
// optimization: {
// minimizer: [
// new UglifyJsPlugin({sourceMap: true})
// ]
// },
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader'
}
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { alias: { '../img': '../public/img' } }
},
{
loader: 'sass-loader'
}
]
}))
// loader: MiniCssExtractPlugin.loader
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader'
})
// loader: MiniCssExtractPlugin.loader
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[hash].[ext]'
}
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
new webpack.NamedModulesPlugin(),
extractCSS,
extractSCSS,
// new MiniCssExtractPlugin({
// // Options similar to the same options in webpackOptions.output
// // both options are optional
// filename: "[name].css",
// chunkFilename: "[id].css"
// }),
new HtmlWebpackPlugin(
{
inject: true,
template: './public/index.html'
}
),
new CopyWebpackPlugin([
{ from: './public/img', to: 'img' }
],
{ copyUnmodified: false }
),
new CopyWebpackPlugin([
{ from: './public/robot.txt', to: 'robot.txt' }
],
{ copyUnmodified: false }
)
]
}
};
I think I need to remove my comments here:
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
and here:
// optimization: {
// minimizer: [
// new UglifyJsPlugin({sourceMap: true})
// ]
// },
But I'm not sure. I look forward to and appreciate any input you can contribute, thank you.
I'm experiencing a TypeError and am unsure how to resolve it. I look forward to any help you can provide. The following is the terminal output from yarn run build:
BUILD_DIR /Users/blakelucey/Desktop/fsd-next/build
SRC_DIR /Users/blakelucey/Desktop/fsd-next/src
[webpack-cli] TypeError: webpack.optimize.UglifyJsPlugin is not a constructor
at module.exports (/Users/blakelucey/Desktop/fsd-next/webpack.config.js:118:7)
at WebpackCLI.loadConfig (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1589:33)
at async WebpackCLI.resolveConfig (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1677:38)
at async WebpackCLI.createCompiler (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:2085:22)
at async WebpackCLI.runWebpack (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:2213:20)
at async Command.<anonymous> (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:850:25)
at async Promise.all (index 1)
at async Command.<anonymous> (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1516:13)
error Command failed with exit code 2.
This is the webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
console.log('BUILD_DIR', BUILD_DIR);
console.log('SRC_DIR', SRC_DIR);
module.exports = (env = {}) => {
return {
entry: {
index: [SRC_DIR + '/index.tsx']
},
output: {
path: BUILD_DIR,
filename: '[name].bundle.js'
},
node: {
fs: "empty"
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', 'scss']
},
// watch: true,
devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
devServer: {
contentBase: BUILD_DIR,
// port: 9001,
compress: true,
hot: true,
open: true
},
// optimization: {
// minimizer: [
// new UglifyJsPlugin({sourceMap: true})
// ]
// },
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader'
}
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { alias: { '../img': '../public/img' } }
},
{
loader: 'sass-loader'
}
]
}))
// loader: MiniCssExtractPlugin.loader
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader'
})
// loader: MiniCssExtractPlugin.loader
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[hash].[ext]'
}
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
new webpack.NamedModulesPlugin(),
extractCSS,
extractSCSS,
// new MiniCssExtractPlugin({
// // Options similar to the same options in webpackOptions.output
// // both options are optional
// filename: "[name].css",
// chunkFilename: "[id].css"
// }),
new HtmlWebpackPlugin(
{
inject: true,
template: './public/index.html'
}
),
new CopyWebpackPlugin([
{ from: './public/img', to: 'img' }
],
{ copyUnmodified: false }
),
new CopyWebpackPlugin([
{ from: './public/robot.txt', to: 'robot.txt' }
],
{ copyUnmodified: false }
)
]
}
};
I think I need to remove my comments here:
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
and here:
// optimization: {
// minimizer: [
// new UglifyJsPlugin({sourceMap: true})
// ]
// },
But I'm not sure. I look forward to and appreciate any input you can contribute, thank you.
Share Improve this question asked Oct 6, 2021 at 15:30 Blake LuceyBlake Lucey 3793 gold badges7 silver badges18 bronze badges2 Answers
Reset to default 16As you may notice that the plugin uglifyjs-webpack-plugin is being deprecated and in the terser-webpack-plugin comes in as replacement. So UglifyJsPlugin plugin is likely unavailable in webpack.optimize. So here is a possible way to fix your issue:
- Just remove the following line in your config file:
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
// Remove this ^
- and add the plugin to
optimizer:
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
// ...
};
Regarding NamedModulesPlugin is not a constructor, it's also be deprecated you can find out here if you're using webpack 5. Basically you can remove that plugin and replace it with optimization option:
module.exports = {
//...
// NamedModulesPlugin → optimization.moduleIds: 'named'
optimization: {
moduleIds: 'named',
},
};
I searched the internet and came across issues like the following but could not solve my project problem
[https://stackoverflow.com/questions/46389267/using-async-await-with-webpack-simple-configuration-throwing-error-regeneratorr][1]