Multiple bugs in one (config-yargs is needed and invalid configuration object errors)

[rawr51919]

• Operating System: Windows 10 Pro Education version 2004
• Node Version: Latest Node version (v15)
• NPM Version: 7.3.0
• webpack Version: 5.12.1
• webpack-dev-server Version: 4.0.0-beta.0/3.11.1
• Browser: Firefox 84.0.2 x64

• This is a bug
• This is a modification request

Code

// webpack.config.js
// only the relevant area is being shown from the webpack.config.js
    devServer: {
        contentBase: path.join(__dirname, "build"),
        writeToDisk: true,
        // uncomment this for  server to refresh when you change files in /build (not required normally)
        //watchContentBase: true,
        port:5000
    },

Expected Behavior

Webpage compiles successfully and shows the webpage running on the local server.

Actual Behavior

Describing the bugs

First two bugs: Using npm run app with webpack dev-server 4.0.0-beta.0 results in an invalid configuration object error, which happens twice for two separate entries in the devServer: entry in webpack.config.js. This entry is written above.

Third and final bug: Using npm run app with webpack dev-server 3.11.1 results in an error that config-yargs is needed.

Last known good configuration will be shown later in this bug report.

Both properties used as part of the first 2 bugs are in fact valid API properties in webpack, which seem to not be recognized by the latest 4.0.0 beta or by 3.11.1. Would love to see both a stable 3.11.x release and 4.0.0 beta release that has all of these bugs fixed, thus why this bug report exists.

To reproduce the bugs:

Make a test webpage that utilizes SASS, HTML, and JS that imports the SASS, and try to compile them with the below configurations using webpack-dev-server --open.

The first bug shows as this:

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'writeToDisk'. These properties are valid:
   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }

The second as this:

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'contentBase'. These properties are valid:
   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }

And the third as this:

node:internal/modules/cjs/loader:928
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\portfolio\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (C:\portfolio\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\portfolio\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}

For Bugs; How can we reproduce the behavior?

Use this list of developer dependencies to trigger the first two bugs:

    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "sass": "^1.32.2",
    "sass-loader": "^10.1.0",
    "terser-webpack-plugin": "^5.1.0",
    "webpack": "^5.12.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^4.0.0-beta.0"

And this list to trigger the third bug:

    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "sass": "^1.32.2",
    "sass-loader": "^10.1.0",
    "terser-webpack-plugin": "^5.1.0",
    "webpack": "^5.12.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"

The last known good configuration (i.e. what can be used as a control for what the results SHOULD look like) is this:

    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^6.3.2",
    "css-loader": "^3.2.0",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^1.3.1",
    "sass": "1.29.0",
    "sass-loader": "^8.0.0",
    "terser-webpack-plugin": "^4.2.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.11.0"

For Features; What is the motivation and/or use-case for the feature?

Not a feature, therefore no motivation and/or use-cases needed here.

[alexander-akait]

Because you need move writeToDisk to dev.writeToDisk, contentBase was renamed to static, please read CHANGELOG

[rawr51919]

Ah. Thanks.

[rawr51919]

Because you need move writeToDisk to dev.writeToDisk, contentBase was renamed to static, please read CHANGELOG

How should I do that? I'm new to webpack and the docs don't seem to help so I'm lost with doing this change

[alexander-akait]

Oh, I see, we will update logs in near future

[rawr51919]

Thanks! Hopefully that resolves my issue

[petermikitsh]

The docs still (incorrectly) mention devServer.writeToDisk: https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

devServer.dev.writeToDisk worked for me.

[zhangxuyang950313]

Because you need move writeToDisk to dev.writeToDisk, contentBase was renamed to static, please read CHANGELOG

Why not write to types?

[mizziness]

The docs still (incorrectly) mention devServer.writeToDisk: https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

devServer.dev.writeToDisk worked for me.

The documentation still hasn't been updated and the change notes aren't clear on where this option now goes. This comment saved me <3 My config now looks like this:

devServer: {
    https: true,
    historyApiFallback: true,
    open: false,
    compress: false,
    hot: true,
    port: 8080,
    host: 'localhost',
    firewall: false,
    headers: { 'Access-Control-Allow-Origin': '*' },
    watchFiles: [ '../templates/**/*.*', '../src/**/*.*' ],
    dev: {
      writeToDisk: true,
    },
    static: [
      {
        directory: paths.templates,
        serveIndex: true,
        watch: true,
      }
    ],
  },

Hope this saves someone else a few hours of headaches!

[famoser]

The config has again been renamed in webpack dev-server 4.0.0-beta.3: https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#400-beta3-2021-05-06

Specifically, dev has been renamed to devMiddleware. A partial config would therefore look this this:

devServer: {
    devMiddleware: {
      writeToDisk: true,
    }
  },

I am posting to this thread as I begun my investigation of the issue here, likely others will do the same.

[DYW972]

Hello, Thank you all for your comments but here I'm with the same issue.

How can I convert this "old" configuration file to the new one?

const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase:  path.join(__dirname, './dist'),
    compress: true,
    watchContentBase: true,
    historyApiFallback: true,
    https: false,
    open: 'Firefox Developer Edition',
    stats: {
      colors: true,
    },
    port: 9002,
    proxy: {
      '/api': 'http://localhost:9000'
    },
    writeToDisk: true,
  },
});

[rawr51919]

Wrap the writeToDisk: true; line in a function labelled devMiddleware: like sodevMiddleware: {    writeToDisk: true;}Sent from my Galaxy -------- Original message --------From: Yohan Dunon ***@***.***> Date: 2021-09-25 1:10 p.m. (GMT-04:00) To: webpack/webpack-dev-server ***@***.***> Cc: "Colton G. Rushton" ***@***.***>, Author ***@***.***> Subject: Re: [webpack/webpack-dev-server] Multiple bugs in one (config-yargs is needed and invalid configuration object errors) (#2958) Hello, Thank you all for your comments but here I'm with the same issue. How can I convert this "old" configuration file to the new one? const {merge} = require('webpack-merge'); const common = require('./webpack.common.js'); const path = require('path'); module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: path.join(__dirname, './dist'), compress: true, watchContentBase: true, historyApiFallback: true, https: false, open: 'Firefox Developer Edition', stats: { colors: true, }, port: 9002, proxy: { '/api': 'http://localhost:9000' }, writeToDisk: true, }, }); —You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or unsubscribe.