Definitelytyped: [@types/webpack] 'devServer' does not exist in type 'Configuration'

[eljenso]

• [x] I tried using the @types/webpack package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @tkqubo @bumbleblym @bcherny @tommytroylin @mohsen1
  
  

I'm using webpack-dev-server and before upgrading from v4.4.4 of @types/webpack, everything worked fine.
But now that I upgraded to v4.4.8, following warning is printed:

WARNING in [at-loader] ./webpack/development.ts:12:3 
    TS2322: Type '{ mode: "development"; devtool: "source-map"; devServer: { host: string; clientLogLevel: string; ...' is not assignable to type 'Configuration'.
  Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration'.

Config in question looks like this:

import * as webpack from "webpack";

import { commonConfig } from "./common";

const config: webpack.Configuration = {
  ...commonConfig,

  mode: "development",

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",
  devServer: {
    host: "0.0.0.0",
    clientLogLevel: "none",
    port: 3000
  }
};

export default config;

Could be a result from #26895.

[mohsen1]

I think @types/webpack-dev-server contributes the devServer member now. Try installing it

[eljenso]

This works, thanks!

[inakianduaga]

This is not working for me on TypeScript 3.0.1

    "@types/webpack": "^4.4.11",
    "@types/webpack-dev-server": "^3.1.0",

Somehow the module augmentation is not being picked up. If I copy it manually into the webpack config it gets read but then I get a compilation error at a later stage. Not sure what I would be missing

Update: The culprit were some packages importing an older version of @types/webpack within their own @types declaration. I fixed it by manually setting the package resolution version inside package.json

  "resolutions": {
    "@types/webpack": "^4.4.11"
  },

now everything works as expected.

[ericyang89]

it works for me

  "@types/webpack": "^4.4.17",
 "@types/webpack-dev-server": "^3.1.1",

[IAMtheIAM]

Make sure you import both into your webpack config

import * as webpack from 'webpack';
import * as webpackDevServer from 'webpack-dev-server';

const config: webpack.Configuration = {}

If you import them both, then it works, but without the webpackDevServer import, it doesnt recognize the type

[FlamesoFF]

I think @types/webpack-dev-server contributes the devServer member now. Try installing it

That not works.

[uipoet]

I had better results after explicitly merging the types:

import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

export const configuration: Configuration = {
  ...
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000
    ...
  }
  ...
}

[IlCallo]

@types/webpack-dev-server contributes the devServer member now

This used to work for me, but now it isn't anymore.

import { Configuration as WebpackConfiguration } from 'webpack';
import 'webpack-dev-server';

In this way the Configuration interface isn't augmented as expected.
Tryed to dig a bit into it, but I could not find any changes which could have triggered this change.

@uipoet solution works, even if I preferred the previous way