Webpack-dev-server: "Webpack Dev Server Invalid Options" without good explanation on what fails (have no idea)

[afilp]

• Operating System: Windows 10
• Node Version: 10.6.0
• NPM Version: 6.1.0
• webpack Version: ^4.18.0
• webpack-dev-server Version: ^3.1.8

• [x ] This is a bug
• [ ] This is a modification request

Code

  // webpack.config.js
// require('argv-set-env')();

const webpack = require('webpack');
const path = require('path');
const Clean = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const DashboardPlugin = require('webpack-dashboard/plugin');
const WebpackMd5Hash = require('webpack-md5-hash');

const ROOT_PATH = path.resolve(__dirname);
const TARGET = process.env.TARGET;
const APP = process.env.APP;
const PORT = process.env.PORT;
const MOCK = process.env.MOCK;
const MOBILEWEB = process.env.MOBILEWEB;
const LGPROCENTRIC = process.env.LGPROCENTRIC;
const ENTRY = MOBILEWEB ? 'mainMobileWeb.js' : 'main.js';

const outputPath = MOBILEWEB ? `public/mobileweb/${APP}` : `public/${APP}`;

const common = {
    entry: {
        bundle: [path.resolve(ROOT_PATH, `src/js/${ENTRY}`)]
    },
    resolve: {
        extensions: ['.js']
    },
    output: {
        path: path.resolve(ROOT_PATH, outputPath),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        /*options: {
                            modules: true
                        }*/
                    }
                ],
                include: [path.resolve(ROOT_PATH, 'src/css'), path.resolve(ROOT_PATH, 'node_modules/react-image-gallery/styles/css')],
            },
            {
                test: /\.s[c|a]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                include: [path.resolve(ROOT_PATH, 'src/css')]
            },
            {
                test: /\.js$/,
                include: [path.resolve(ROOT_PATH, 'src')],
                exclude: /smaf\.js/,
                loader: "babel-loader"
            },
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
                include: [path.resolve(ROOT_PATH, 'src')],
                exclude: /smaf\.js/,
                loader: 'url?limit=8192&name=[name].[ext]'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }]
    },
    plugins: [
        // new DashboardPlugin({port: PORT}),
        new ExtractTextPlugin('[name].css'),
        new Clean([outputPath]),
        new CopyWebpackPlugin([
            // {from: 'src/css', to: 'css', force: true},
            {from: 'src/img', to: 'img', force: true}
        ]),
        new HtmlWebpackPlugin({
            title: MOBILEWEB ? 'Test' : 'Test UI',
            description: MOBILEWEB ? 'Test: Get the Most from Life!' : 'The Test Smart TV application',
            template: 'src/base-template.html',
            favicon: 'src/favicon.ico',
            inject: 'body',
            filename: 'index.html'
        }),
        new WebpackMd5Hash(),
    ]
};

if (TARGET === 'start' || !TARGET) {
    let queryParams = '';
    module.exports = merge(common, {
        mode: 'development',
        devtool: 'source-map',
        devServer: {
            contentBase: `./${outputPath}`,
            outputPath: path.resolve(ROOT_PATH, outputPath),
            historyApiFallback: true,
            hot: true,
            host: '0.0.0.0',
            inline: true,
            port: PORT,
            progress: true,
            disableHostCheck: true,
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    // This has effect on the react lib size PLUS determines the 'APP' to be used
                    // 'NODE_ENV': JSON.stringify('development'),
                    'APP': JSON.stringify(APP),
                    'MOCK': JSON.stringify(MOCK),
                    'MOBILEWEB': JSON.stringify(MOBILEWEB),
                    'LGPROCENTRIC': JSON.stringify(LGPROCENTRIC),
                },
            }),
            new OpenBrowserPlugin({url: `http://localhost:${PORT}/?${queryParams}`})
        ]
    });
}

if (TARGET === 'build') {
    module.exports = merge(common, {
        mode: 'production',
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    // This has effect on the react lib size PLUS determines the 'APP' to be used
                    // 'NODE_ENV': JSON.stringify('production'),
                    'APP': JSON.stringify(APP),
                    'MOBILEWEB': JSON.stringify(MOBILEWEB),
                    'LGPROCENTRIC': JSON.stringify(LGPROCENTRIC),
                },
            }),
        ]
    });
}

  // additional code, remove if not needed.
// PACKAGE.JSON
"scripts": {
    "start-dinings": "cross-env APP=dinings TARGET=start PORT=33102 webpack-dev-server",

Expected Behavior

Webpack-dev-server to start when running npm run start-dinings

It used to start when I was in version 2 of webpack (now upgraded to latest version 4)

Actual Behavior

ERROR:

For Bugs; How can we reproduce the behavior?

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

[michael-ciniawsky]

        devServer: {
            contentBase: `./${outputPath}`,
-           outputPath: path.resolve(ROOT_PATH, outputPath),
            historyApiFallback: true,
            hot: true,
            host: '0.0.0.0',
            inline: true,
            port: PORT,
            progress: true,
            disableHostCheck: true,
        },

See https://webpack.js.org/configuration/dev-server/ for all available devServer options

[michael-ciniawsky]

For the unhelpful err.message for invalid/additional properties the tracking issue is https://github.com/webpack-contrib/schema-utils/issues/35

[afilp]

That was it indeed, thanks!

[Muzietto]

In my case, adding outputPath to the dev-server config object just doubled the error message:

options should NOT have additional properties
options should NOT have additional properties

I removed colors: true, (suggested somewhere) and the error message went away. I guess this is all about the version of webpack-dev-server we are using. In my case it's 3.1.8

[skirankumar7]

In my case, adding outputPath to the dev-server config object just doubled the error message:

options should NOT have additional properties
options should NOT have additional properties

I removed colors: true, (suggested somewhere) and the error message went away. I guess this is all about the version of webpack-dev-server we are using. In my case it's 3.1.8

For me also same why this is happening , what is the relation to color property to this error can someone clarify on this.

[scottc-netflix]

Got this with the latest version because of port, looks like it's moved. Still no helpful error messages.

[nahuelcabrera]

I just only remove this line from devServer property inside module.exports

devServer: { contentBase: path.join(__dirname, "public/"), compress: true, port: 4500, hot: true, publicPath: "http://localhost:4500/dist/", progress: true, /**hostOnly: true, BUG ValidationError: webpack Dev Server Invalid Options*/ clientLogLevel: "info" },

[JoshAudibert]

historyApiFallback option in the config kept causing this for me.
Fixed by just adding --history-api-fallback to the package.json webpack-dev-server command

[zeelz]

historyApiFallback option in the config kept causing this for me.
Fixed by just adding --history-api-fallback to the package.json webpack-dev-server command

--history-api-fallback in package.son worked for me as well. Removed devServer object on webpack config