Dev Server has been initialized using an options object that does not match the API schema. unknown property 'publicPath'

Question

I am using webpack: 5.71.0 webpack-cli: 4.9.2 webpack-dev-server 4.8.1

in my webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: { presets: ["@babel/env"] }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    resolve: { extensions: ['*', '.js', '.jsx'] },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: './bundle.js'
    },
    devServer: {
        static: path.join(__dirname, 'public/'),
        publicPath: 'http://localhost:3000/dist/',
        port: 3000,
        hot: "only"
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

I got the following error [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

options has an unknown property 'publicPath'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

what is the new alternative to publicPath?

I would highly recommend not using vanilla webpack in favour of better tools like vite, next, astro, or even CRA. While it is an opinion you're not asking for, it simplifies most of the problems you encounter (including this one) - and doesn't require you to manually add style-loader and babel-loader. — Angshu31, Aug 18 '22 at 13:02

score 16 · Answer 1 · answered Aug 18 '22 at 12:55

16

Looks like your webpack config was written using v3 of webpack-dev-server. The schema has changed for v4 as per webpack-dev-server v4 migration guide

So your devServer block should place publicPath within the devMiddleware section, i.e.:

devServer: {
  static: path.join(__dirname, 'public/'),
  devMiddleware: {
    publicPath: '/dist/'
  },
  port: 3000,
  hot: "only"
},

answered Aug 18 '22 at 12:55

Steve Jefferies

589
5
13

how about key and cert ? ``` // key: fs.readFileSync('./certs/example.com+5-key.pem'), // cert: fs.readFileSync('./certs/example.com+5.pem'),``` – Yogi Arif Widodo Sep 25 '22 at 02:47
How do I get v3? – AnonymousUser Feb 17 '23 at 05:15

score 1 · Answer 2 · answered Apr 06 '22 at 14:41

1

You probably don't need to set publicPath in the devServer configuration at all; it's probably read from output.publicPath.

Try to just get rid of it and see if things still work. (They should.)

answered Apr 06 '22 at 14:41

AKX

152,115
15
115
172

yes it run but it gives me this error – Osama A. Abdelnasser Apr 06 '22 at 14:47
I mean, remove `publicPath` from under `devServer`. – AKX Apr 06 '22 at 16:14
I edited above comment but it didn't change. I removed publicPath and it compiled successfully but didn't show anything on HTTP://localhost:3000 – Osama A. Abdelnasser Apr 06 '22 at 19:37
If your publicPath is dist, then you'll need `http://localhost:3000/dist/`, of course... – AKX Apr 09 '22 at 10:01

jam j · Answer 3 · 2023-08-25T09:42:45.310

You can try this code

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
require('babel-register')

module.exports = {
    entry: ['@babel/polyfill', './src/app.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './index.html'
        })
    ],
    mode: 'development',
    devtool: 'inline-source-map',
        devServer: {
        static: {
          directory: path.resolve(__dirname, 'public/'),
        },
        devMiddleware: {
            publicPath: '/dist/'
        },
        port: 3000,
        hot: "only"
    }
}

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 24 '23 at 06:01

Dev Server has been initialized using an options object that does not match the API schema. unknown property 'publicPath'

3 Answers3