configuration has an unknown property 'writeToDisk'. These properties are valid

Bug report

What is the current behavior? “dev” build exits with status 2.

If the current behavior is a bug, please provide the steps to reproduce. It happens when executing webpack serve --progress --profile --config webpack.dev.js

Webpack config

/* eslint-disable import/no-dynamic-require */
const path = require('path');
const { camelCase, startCase } = require('lodash');
const webpack = require('webpack');

const { ModuleFederationPlugin } = webpack.container;
const cwd = process.cwd();
const DIST_PATH = path.resolve(cwd, 'dist');
const SRC_PATH = path.resolve(cwd, 'src');
const PACKAGE_JSON_PATH = path.resolve(cwd, 'package.json');
const INDEX_JS_PATH = path.resolve(SRC_PATH, 'index.js');
const isDev = process.env.BABEL_ENV === 'development';
const NODE_MODULES = 'node_modules';
// PATH FROM EK-REACT_MODULE-BUILD (ie: ek-react-module-build/node_modules)
const NODE_MODULES_ABSOLUTE_PATH = path.resolve(__dirname, NODE_MODULES);
// PATH FROM WHERE THE BUILD IS TRIGGERED (ie: ek-request/node_modules)
const NODE_MODULES_RELATIVE_PATH = path.resolve(cwd, NODE_MODULES);

const {
  id: packageId,
  exposes,
  name,
  packageName,
  parentPath = '',
  remotes,
  shared
} = require(PACKAGE_JSON_PATH);

const getDefaultExpose = () => {
  const componentName = startCase(name).replace(/ /g, '');
  const fullComponentPath = `./${componentName}`;

  return { [fullComponentPath]: './' };
};

const baseConfig = {
  context: SRC_PATH,
  entry: INDEX_JS_PATH,
  resolve: {
    extensions: ['.js'],
    // Avoid duplicates (each module imports only once from app/node_modules)
    modules: [
      NODE_MODULES_ABSOLUTE_PATH,
      NODE_MODULES_RELATIVE_PATH,
      NODE_MODULES
    ]
  },
  output: {
    path: DIST_PATH,
    filename: path.join(parentPath, packageId, 'index.js'),
    chunkFilename: path.join(parentPath, packageId, 'static', '[name].[chunkhash].js'),
    publicPath: 'auto',
    library: packageName || packageId,
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [SRC_PATH],
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                [
                  require.resolve('@babel/preset-env'),
                  {
                    // debug: true,
                    corejs: {
                      version: '3.14'
                    },
                    useBuiltIns: 'usage',
                    targets: 'defaults'
                  }
                ],
                [
                  require.resolve('@babel/preset-react'),
                  {
                    development: isDev
                  }
                ]
              ],
              plugins: [
                require.resolve('babel-plugin-styled-components'),
                require.resolve('@babel/plugin-proposal-class-properties')
              ]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          'css-loader'
        ],
        type: 'javascript/auto'
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        },
        type: 'javascript/auto'
      },
      {
        test: /\.svg$/,
        use: [
          require.resolve('@svgr/webpack'),
          {
            loader: require.resolve('url-loader'),
            options: {
              esModule: false
            }
          }
        ],
        type: 'javascript/auto'
      }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
      name: `${camelCase(name)}`,
      filename: path.join(parentPath, packageId, 'remoteEntry.js'),
      exposes: exposes || getDefaultExpose(),
      shared,
      remotes
    })
  ]
};

module.exports = baseConfig;

Webpack dev config

const path = require('path');
const portfinder = require('portfinder');
const request = require('request');

const DEVELOPMENT_MODE = 'development';

process.env.BABEL_ENV = DEVELOPMENT_MODE;
process.env.NODE_ENV = DEVELOPMENT_MODE;

const baseConfig = require('./webpack.base');

const cwd = process.cwd();
const PACKAGE_JSON_PATH = path.resolve(cwd, 'package.json');
const HOST = process.env.HOST || '0.0.0.0';
const PROXY_SERVER_PORT = process.env.PROXY_SERVER_PORT || 8000;

// eslint-disable-next-line import/no-dynamic-require
const { id: packageId } = require(PACKAGE_JSON_PATH);
let errorStatus = false;

async function startDevServer() {
  // Find a suitable port
  portfinder.basePort = 8001;
  const port = await portfinder.getPortPromise();

  // Override some configuration for development environment
  const devConfig = {
    ...baseConfig,
    devtool: 'inline-source-map',
    mode: DEVELOPMENT_MODE,
    target: 'web',
    devServer: {
      compress: true,
      host: HOST,
      hot: true,
      port,
      writeToDisk: true
    }
  };

  // Register module on local proxy server
  setInterval(() => {
    request(
      `http://${HOST}:${PROXY_SERVER_PORT}/register/${encodeURIComponent(`/${packageId}`)}/${port}`,
      (error, response) => {
        if (response && response.statusCode === 404) {
          process.stdout.write('Attempt to connect to server\n');
        }
        if (error) {
          if (!errorStatus) {
            console.error({ error });
          }
          errorStatus = true;
        }
      }
    );
  }, 1000);

  return devConfig;
}

module.exports = startDevServer;

What is the expected behavior? The build should finish without errors, this property is supported per configuration.

Other relevant information:

Using:

"dependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.12.13",
    "@svgr/webpack": "^5.5.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^1.12.0",
    "core-js": "^3.14.0",
    "css-loader": "^5.2.6",
    "css-minimizer-webpack-plugin": "^3.0.1",
    "file-loader": "^6.2.0",
    "lodash": "^4.17.21",
    "portfinder": "^1.0.28",
    "request": "^2.88.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^4.0.0-beta.3"
  },

Node.js version: ^12 Operating System: OSX

[alexander-akait]

Please read CHANGELOG before when you migrate on beta, there are a lot of changes, also the error message contains allowed options, in your can use need to set firewall: false

[testacode]

i.e.

 devServer: {
      compress: true,
      host: HOST,
      hot: true,
      port,
      devMiddleware: {
          writeToDisk: true
      }
    }

Thanks for the reply, this is also happening with disableHostCheck.