TypeScript conflict with Webpack 5

[msheakoski]

When using a TypeScript syntax webpack.config.ts config with webpack-merge 5.2.0 and Webpack 5, the following TypeScript error is generated when trying to use merge(config, {})

TS2345: Argument of type 'Configuration' is not assignable to parameter of type 'Configuration | Configuration[]'.
  Type 'import("node_modules/webpack/types").Configuration' is not assignable to type 'import("node_modules/@types/webpack/index").Configuration'.
    Types of property 'entry' are incompatible.
      Type 'string | (() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>) | EntryObject | [string, ...string[]] | undefined' is not assignable to type 'string | string[] | Entry | EntryFunc | undefined'.
        Type '() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>' is not assignable to type 'string | string[] | Entry | EntryFunc | undefined'.
          Type '() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>' is not assignable to type 'EntryFunc'.
            Type 'string | EntryObject | [string, ...string[]] | Promise<EntryStatic>' is not assignable to type 'string | string[] | Entry | Promise<string | string[] | Entry>'.
              Type 'EntryObject' is not assignable to type 'string | string[] | Entry | Promise<string | string[] | Entry>'.
                Type 'EntryObject' is not assignable to type 'string'.

This is because webpack-merge relies on @types/webpack which is for Webpack 4. Webpack 5 now includes its own types and does not rely on the external typings.

Webpack 4's entry type looks like:

interface Configuration {
  entry?: string | string[] | Entry | EntryFunc;
}

Webpack 5's entry type looks like:

type Entry =
  | string
  | (() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>)
  | EntryObject
  | [string, ...string[]];

[bebraw]

Yeah, that's a great point. I could make it so that Configuration is passed as a generic as doing this would decouple the utility from webpack types. Doing this would also solve another issue that's open. I wonder if that should be a minor or major release, though, as it's breaking the type definition. Any thoughts on this? I guess a major would be a safer bet.

…

On 28.10.2020, at 22:20, msheakoski ***@***.***> wrote:  When using a TypeScript syntax webpack.config.ts config with webpack-merge 5.2.0 and Webpack 5, the following TypeScript error is generated when trying to use merge(config, {}) TS2345: Argument of type 'Configuration' is not assignable to parameter of type 'Configuration | Configuration[]'. Type 'import("node_modules/webpack/types").Configuration' is not assignable to type ***@***.***/webpack/index").Configuration'. Types of property 'entry' are incompatible. Type 'string | (() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>) | EntryObject | [string, ...string[]] | undefined' is not assignable to type 'string | string[] | Entry | EntryFunc | undefined'. Type '() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>' is not assignable to type 'string | string[] | Entry | EntryFunc | undefined'. Type '() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>' is not assignable to type 'EntryFunc'. Type 'string | EntryObject | [string, ...string[]] | Promise<EntryStatic>' is not assignable to type 'string | string[] | Entry | Promise<string | string[] | Entry>'. Type 'EntryObject' is not assignable to type 'string | string[] | Entry | Promise<string | string[] | Entry>'. Type 'EntryObject' is not assignable to type 'string'. This is because webpack-merge relies on @types/webpack which is for Webpack 4. Webpack 5 now includes its own types and does not rely on the external typings. Webpack 4's entry type looks like: interface Configuration { entry?: string | string[] | Entry | EntryFunc; } Webpack 5's entry type looks like: type Entry = | string | (() => string | EntryObject | [string, ...string[]] | Promise<EntryStatic>) | EntryObject | [string, ...string[]]; — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[msheakoski]

You might be able to do it as a minor release if you defaulted the generic to the Configuration from Webpack 4. This would still allow for overriding with the Webpack 5 Configuration.

Something like:

import { Configuration } from "webpack"; // from @types/webpack
declare function merge<T = Configuration>(firstConfiguration: T | T[], ...configurations: T[]): T;

If you decide to decouple the types like moving them to a peerDependency or removing them entirely from the package, I would consider that a major release because it would break builds (especially for those dependency updating bots) until manually adding the generic.

[msheakoski]

I did a little more experimenting and think you might be able to get away with removing the dependency on @types/webpack while remaining backwards compatible. The only side effect is that it loosens up the accepted types for firstConfiguration and configurations. Anything object-like will work but scalars will trigger an error.

declare function merge<T extends object>(firstConfiguration: T | T[], ...configurations: T[]): T;

[bebraw]

Yeah, I think your proposal is the way to go. It's better to loosen the type a little than to break as that still allows a minor release. I'll make sure to document the caveat when implementing. Thanks!