Home > other >  Invalid configuration object. Webpack has been initialized using a configuration object that does no
Invalid configuration object. Webpack has been initialized using a configuration object that does no

Time:10-17

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.

  • Related