Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Ask Question
In running
yarn run build
I am running into the following error:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.optimization has an unknown property 'moduleIDs'. These properties are valid:
object { checkWasmTypes?, chunkIds?, concatenateModules?, emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?, mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?, moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?, providedExports?, realContentHash?, removeAvailableModules?, removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?, usedExports? }
-> Enables/Disables integrated optimizations.
I'm not sure if this is due to deprecations in my webpack modules, or where else I might need to look.
Here is my
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 TerserPlugin = require("terser-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 = '/Users/blakelucey/Desktop/fsd-next/build';
//path.resolve(__dirname, 'build');
const SRC_DIR = '/Users/blakelucey/Desktop/fsd-next/src';
//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"
//Buffer: false,
//process: false,
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: {
//This moduleIDs throws an error. --> Per webpack this is updated form of NamedModulesPlugin()
moduleIDs: 'named',
minimize: true,
minimizer: [
new TerserPlugin()
// 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 }),
//NamedModulesPlugin() may throw an error if Dockerfile is rearranged.
//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 }
Here is my
package.json
:
"name": "fsdlogistics",
"version": "1.0.0",
"description": "FSD Logistics Order and Shipping Managment System",
"author": "Mathieu Currie",
"license": "MIT",
"private": true,
"devDependencies": {
"@types/classnames": "^2.2.3",
"@types/react": "^16.0.18",
"@types/react-dom": "^16.0.2",
"awesome-typescript-loader": "^3.2.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.2.0",
"css-hot-loader": "^1.3.2",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"husky": "^3.1.0",
"node-sass": "^6.0.1",
"prettier": "1.19.1",
"pretty-quick": "^2.0.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"source-list-map": "^2.0.0",
"style-loader": "^0.19.0",
"typescript": "^4.4.3",
"uglify-js": "^3.6.0",
"url-loader": "^0.6.2",
"webpack": "^5.58.2",
"webpack-dev-server": "^3.11.2"
"dependencies": {
"@date-io/date-fns": "1.3.11",
"@mapbox/node-pre-gyp": "^1.0.5",
"@material-ui/core": "4.9.8",
"@material-ui/pickers": "^3.3.10",
"@tecuity/barcode-generator": "^1.2.0",
"axios": "^0.18.0",
"bootstrap": "4.1",
"canvas": "^2.8.0",
"chart.js": "2.7.1",
"core-js": "^3.18.2",
"csv-parser": "^2.3.0",
"date-fns": "2.11.1",
"excel4node": "^1.6.0",
"express": "^4.16.3",
"express-fileupload": "^0.4.0",
"font-awesome": "^4.7.0",
"ftp": "^0.3.10",
"history": "4.7.2",
"html-pdf": "^3.0.1",
"jquery": "^3.2.1",
"jsbarcode": "^3.11.0",
"moment": "^2.22.2",
"moment-range": "^2.2.0",
"moment-timezone": "^0.5.23",
"multer": "^1.3.1",
"mysql": "^2.16.0",
"mysql2": "^2.2.5",
"node-canvas": "^2.7.0",
"react": "^16.0.0",
"react-chartjs-2": "2.6.4",
"react-date-range": "^1.0.0-beta",
"react-dom": "^16.0.0",
"react-moment": "^0.8.3",
"react-router-dom": "^4.2.2",
"react-transition-group": "^2.2.1",
"reactstrap": "^5.0.0-alpha.3",
"simple-line-icons": "^2.4.1",
"solr": "^0.3.0",
"styled-components": "^3.1.6",
"terser": "^5.9.0",
"ts-loader": "^9.2.6",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack-cli": "^4.8.0",
"xlsx": "^0.14.3"
"scripts": {
"dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
"start": "webpack serve --mode='development'",
"build": "webpack --progress",
"clean": "rimraf ./build"
"engines": {
"node": ">= 6.0.0",
"npm": ">= 5.0.0"
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
I have been trying to debug this for several days now and am not sure where the problem lies. Any help is greatly appreciated. Thank you.
Thanks for contributing an answer to Stack Overflow!
-
Please be sure to
answer the question
. Provide details and share your research!
But
avoid
…
-
Asking for help, clarification, or responding to other answers.
-
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our
tips on writing great answers
.
