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",
"copyright": "Copyright 2018 FoodServiceDirect Logistics",
"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.
CodePudding user response：
I think it is case sensitive, ie. change the D to a d, change moduleIDs to moduleIds.