webpack-dev-server doesn't accept contentBase as a valid field

webpack-dev-server_output

/home/john/Downloads/repos/project/app/.yarn/cache/schema-utils-npm-3.0.0-e97702da81-a084f593f2.zip/node_modules/schema-utils/dist/validate.js:104
    throw new _ValidationError.default(errors, schema, configuration);
          ^

ValidationError: 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? }
    at validate (/home/john/Downloads/repos/project/app/.yarn/cache/schema-utils-npm-3.0.0-e97702da81-a084f593f2.zip/node_modules/schema-utils/dist/validate.js:104:11)
    at new Server (/home/john/Downloads/repos/project/app/.yarn/$$virtual/webpack-dev-server-virtual-678ff6defa/0/cache/webpack-dev-server-https-30a54e980a-affc583bbc.zip/node_modules/webpack-dev-server/lib/Server.js:42:5)
    at /home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/startDevServer.js:34:24
    at Array.forEach (<anonymous>)
    at Object.startDevServer [as default] (/home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/startDevServer.js:25:22)
    at /home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/index.js:48:33 {
  errors: [
    {
      keyword: 'additionalProperties',
      dataPath: '',
      schemaPath: '#/additionalProperties',
      params: { additionalProperty: 'contentBase' },
      message: 'should NOT have additional properties',
      schema: false,
      parentSchema: {
        type: 'object',
        definitions: {
          StaticObject: {
            type: 'object',
            additionalProperties: false,
            properties: [Object]
          },
          StaticString: { type: 'string', minLength: 1 }
        },
        properties: {
          bonjour: { type: 'boolean' },
          client: {
            type: 'object',
            properties: [Object],
            additionalProperties: false
          },
          compress: { type: 'boolean' },
          dev: { type: 'object' },
          firewall: { anyOf: [Array] },
          headers: { type: 'object' },
          historyApiFallback: { anyOf: [Array] },
          host: { anyOf: [Array] },
          hot: { anyOf: [Array] },
          http2: { type: 'boolean' },
          https: { anyOf: [Array] },
          injectClient: { anyOf: [Array] },
          injectHot: { anyOf: [Array] },
          liveReload: { type: 'boolean' },
          onAfterSetupMiddleware: { instanceof: 'Function' },
          onBeforeSetupMiddleware: { instanceof: 'Function' },
          onListening: { instanceof: 'Function' },
          open: { anyOf: [Array] },
          openPage: { anyOf: [Array] },
          overlay: { anyOf: [Array] },
          port: { anyOf: [Array] },
          proxy: { anyOf: [Array] },
          public: { type: 'string' },
          setupExitSignals: { type: 'boolean' },
          static: { anyOf: [Array] },
          stdin: { type: 'boolean' },
          transportMode: { anyOf: [Array] },
          useLocalIp: { type: 'boolean' }
        },
        errorMessage: {
          properties: {
            bonjour: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverbonjour)',
            client: 'should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverclient)',
            compress: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devservercompress)',
            dev: 'should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverdev-)',
            firewall: 'should be {Boolean|Array} (https://webpack.js.org/configuration/dev-server/#devserverfirewall)',
            headers: 'should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverheaders)',
            historyApiFallback: 'should be {Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback)',
            host: 'should be {String|Null} (https://webpack.js.org/configuration/dev-server/#devserverhost)',
            hot: 'should be {Boolean|String} (https://webpack.js.org/configuration/dev-server/#devserverhot)',
            http2: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverhttp2)',
            https: 'should be {Object|Boolean} (https://webpack.js.org/configuration/dev-server/#devserverhttps)',
            injectClient: 'should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjectclient)',
            injectHot: 'should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjecthot)',
            liveReload: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverlivereload)',
            onAfterSetupMiddleware: 'should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverafter)',
            onBeforeSetupMiddleware: 'should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverbefore)',
            onListening: 'should be {Function} (https://webpack.js.org/configuration/dev-server/#onlistening)',
            open: 'should be {String|Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserveropen)',
            openPage: 'should be {String|Array} (https://webpack.js.org/configuration/dev-server/#devserveropenpage)',
            overlay: 'should be {Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserveroverlay)',
            port: 'should be {Number|String|Null} (https://webpack.js.org/configuration/dev-server/#devserverport)',
            proxy: 'should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)',
            public: 'should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublic)',
            setupExitSignals: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserversetupexitsignals)',
            static: 'should be {Boolean|String|Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverstatic)',
            stdin: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverstdin)',
            transportMode: 'should be {String|Object} (https://webpack.js.org/configuration/dev-server/#devservertransportmode)',
            useLocalIp: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserveruselocalip)'
          }
        },
        additionalProperties: false
      },
      data: {
        contentBase: '/home/john/Downloads/repos/project/app/dist',
        compress: true,
        port: 9000,
        hot: true,
        setupExitSignals: true,
        host: 'localhost'
      }
    }
  ],
  schema: {
    type: 'object',
    definitions: {
      StaticObject: {
        type: 'object',
        additionalProperties: false,
        properties: {
          directory: { type: 'string', minLength: 1 },
          staticOptions: { type: 'object' },
          publicPath: { anyOf: [Array] },
          serveIndex: { anyOf: [Array] },
          watch: { anyOf: [Array] }
        }
      },
      StaticString: { type: 'string', minLength: 1 }
    },
    properties: {
      bonjour: { type: 'boolean' },
      client: {
        type: 'object',
        properties: {
          host: { type: 'string' },
          path: { type: 'string' },
          port: { anyOf: [Array] },
          logging: { enum: [Array] },
          progress: { type: 'boolean' }
        },
        additionalProperties: false
      },
      compress: { type: 'boolean' },
      dev: { type: 'object' },
      firewall: {
        anyOf: [
          { type: 'boolean' },
          { type: 'array', items: [Object], minItems: 1 }
        ]
      },
      headers: { type: 'object' },
      historyApiFallback: { anyOf: [ { type: 'boolean' }, { type: 'object' } ] },
      host: { anyOf: [ { type: 'string' }, { type: 'null' } ] },
      hot: { anyOf: [ { type: 'boolean' }, { enum: [Array] } ] },
      http2: { type: 'boolean' },
      https: {
        anyOf: [
          { type: 'boolean' },
          {
            type: 'object',
            additionalProperties: false,
            properties: [Object]
          }
        ]
      },
      injectClient: { anyOf: [ { type: 'boolean' }, { instanceof: 'Function' } ] },
      injectHot: { anyOf: [ { type: 'boolean' }, { instanceof: 'Function' } ] },
      liveReload: { type: 'boolean' },
      onAfterSetupMiddleware: { instanceof: 'Function' },
      onBeforeSetupMiddleware: { instanceof: 'Function' },
      onListening: { instanceof: 'Function' },
      open: {
        anyOf: [ { type: 'string' }, { type: 'boolean' }, { type: 'object' } ]
      },
      openPage: {
        anyOf: [
          { type: 'string' },
          { type: 'array', items: [Object], minItems: 1 }
        ]
      },
      overlay: {
        anyOf: [
          { type: 'boolean' },
          { type: 'object', properties: [Object] }
        ]
      },
      port: {
        anyOf: [ { type: 'number' }, { type: 'string' }, { type: 'null' } ]
      },
      proxy: {
        anyOf: [
          { type: 'object' },
          { type: 'array', items: [Object], minItems: 1 }
        ]
      },
      public: { type: 'string' },
      setupExitSignals: { type: 'boolean' },
      static: {
        anyOf: [
          { type: 'boolean' },
          { '$ref': '#/definitions/StaticString' },
          { '$ref': '#/definitions/StaticObject' },
          { type: 'array', items: [Object], minItems: 1 }
        ]
      },
      stdin: { type: 'boolean' },
      transportMode: {
        anyOf: [
          {
            type: 'object',
            properties: [Object],
            additionalProperties: false
          },
          { enum: [Array] }
        ]
      },
      useLocalIp: { type: 'boolean' }
    },
    errorMessage: {
      properties: {
        bonjour: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverbonjour)',
        client: 'should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverclient)',
        compress: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devservercompress)',
        dev: 'should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverdev-)',
        firewall: 'should be {Boolean|Array} (https://webpack.js.org/configuration/dev-server/#devserverfirewall)',
        headers: 'should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverheaders)',
        historyApiFallback: 'should be {Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback)',
        host: 'should be {String|Null} (https://webpack.js.org/configuration/dev-server/#devserverhost)',
        hot: 'should be {Boolean|String} (https://webpack.js.org/configuration/dev-server/#devserverhot)',
        http2: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverhttp2)',
        https: 'should be {Object|Boolean} (https://webpack.js.org/configuration/dev-server/#devserverhttps)',
        injectClient: 'should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjectclient)',
        injectHot: 'should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjecthot)',
        liveReload: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverlivereload)',
        onAfterSetupMiddleware: 'should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverafter)',
        onBeforeSetupMiddleware: 'should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverbefore)',
        onListening: 'should be {Function} (https://webpack.js.org/configuration/dev-server/#onlistening)',
        open: 'should be {String|Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserveropen)',
        openPage: 'should be {String|Array} (https://webpack.js.org/configuration/dev-server/#devserveropenpage)',
        overlay: 'should be {Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserveroverlay)',
        port: 'should be {Number|String|Null} (https://webpack.js.org/configuration/dev-server/#devserverport)',
        proxy: 'should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)',
        public: 'should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublic)',
        setupExitSignals: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserversetupexitsignals)',
        static: 'should be {Boolean|String|Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverstatic)',
        stdin: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverstdin)',
        transportMode: 'should be {String|Object} (https://webpack.js.org/configuration/dev-server/#devservertransportmode)',
        useLocalIp: 'should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserveruselocalip)'
      }
    },
    additionalProperties: false
  },
  headerName: 'Object',
  baseDataPath: 'configuration',
  postFormatter: null
}

@arihant-2310 This solved the problem that I've been experiencing. Many thanks

Use static in place of contentBase static: './'
@arihant-2310 was stuck with this error ...thanks for helping :)

Use static in place of contentBase static: './'

thanks man for the help, it really help me alot.

@Maruz

according to webpack/webpack-dev-server#2958 (comment)

contentBase was renamed to static

Thanks a lot for this!

Use static in place of contentBase static: './'

thankyouuu it works.

@Maruz

according to webpack/webpack-dev-server#2958 (comment)

contentBase was renamed to static

👍

Utilice static en lugar de contentBase static: './'

Gracias amigo

@Marchelllo27 thanks man

Thanks!!!!

@arihant-2310 Thank you!

Thank you so much !!!!

thanks @arihant-2310 that save my life

@mbalc
Thank you!

Thanks machine:) you help me a lot, because i was in a looping step:)
Best regards from Portugal

devServer: {
//contentBase: path.join(__dirname, 'dist'),
allowedHosts: path.join(__dirname, 'dist'),
compress:true,
port:3005,
}

Using static in place of contentBase eliminates the error.
Thank you so much sir

Adding static :"/" did the trick for me, seems contentBase is not supported again

This worked!! Thanks!

I remember I read that somewhere, but I don't remember why. Can someone explain?

Adding static :"/" did the trick for me, seems contentBase is not supported again

Thanks bro

replace it with static:, just confirming that it worked for me too.

static: for the win!

Да, static работает, но теперь при запуске и переходе на главную страницу отображается модальное окно со всеми ошибками при компиляции

Gracias 💯

@Maruz

according to webpack/webpack-dev-server#2958 (comment)

contentBase was renamed to static

Thanks a lot. It works right now!