Plugin API: Type definition of `configureWebpack` does allow all possible keys

[jarhodes314]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] I have read the console error message carefully (if applicable).

Description

The type definition for configureWebpack in the plugins API currently uses the Configuration type from webpack: https://github.com/facebook/docusaurus/blob/affca7a9a28b2b07716336bc3103b0ff434169df/packages/docusaurus-types/src/plugin.d.ts#L125-L130

When I return an object containing a devServer key, this works as expected, but I get a type error because the Configuration type doesn't contain a key called devServer.

As far as I can tell, from some very uninformed searching, I think the type that this should actually be is https://github.com/webpack/webpack/blob/main/declarations/WebpackOptions.d.ts#L797.

Reproducible demo

https://codesandbox.io/p/sandbox/docusaurus-webpack-devserver-tqk8nr

Steps to reproduce

1. Open docusaurus.config.ts
2. Uncomment either of the keys under plugins
3. Observe the type error against redirectPlugin

Expected behavior

I expect docusaurus.config.ts to type check successfully when devServer is configured

Actual behavior

I get a type error in docusaurus.config.ts when devServer is configured, yet it definitely behaves as I expect

Your environment

No response

Self-service

• [X] I'd be willing to fix this bug myself.

[slorber]

Hmm, there's something weird in our setup, it seems Webpack now provdies its own type defs now but we keep using @types/webpack external defs.

Anyway, if you use "types": ["@types/webpack-dev-server"] in tsconfig.json it should fix your problem because those types add the required attribute through declaration merging:

declare module 'webpack' {
    interface Configuration {
        /**
         * Can be used to configure the behaviour of webpack-dev-server when
         * the webpack config is passed to webpack-dev-server CLI.
         */
        devServer?: WebpackDevServer.Configuration | undefined;
    }
}

Tested locally on our site and it works 👍