Unsupported type in webpack 5

[RomainGaillardLesEchos]

We are facing this issue (webpack 5):

export default function config(): Configuration {
  return {
    ...,
    externals: [
      nodeExternals({
        modulesDir: path.resolve(__dirname, 'node_modules'),
        allowlist: ['@services/shared'],
      }),
    ],
  };
}

Type 'ExternalsFunctionElement[]' is not assignable to type 'string | RegExp | (ExternalItemObjectKnown & ExternalItemObjectUnknown) | ExternalItem[] | ((data: ExternalItemFunctionData, callback: (err?: Error | undefined, result?: string | ... 3 more ... | undefined) => void) => void) | ((data: ExternalItemFunctionData) => Promise<...>) | undefined'.
  Type 'ExternalsFunctionElement[]' is not assignable to type 'ExternalItem[]'.
    Type 'ExternalsFunctionElement' is not assignable to type 'ExternalItem'.
      Type 'ExternalsFunctionElement' is not assignable to type '(data: ExternalItemFunctionData, callback: (err?: Error | undefined, result?: string | boolean | string[] | { [index: string]: any; } | undefined) => void) => void'.ts(2322)

types.d.ts(1977, 2): The expected type comes from property 'externals' which is declared here on type 'Configuration'

Type Configuration is provided by webpack version ^5.36.2 and webpack-node-externals version ^3.0.0

Any idea ?

[apancutt]

This is because @types/webpack-node-externals is targeting webpack@4 typings provided by DT, conflicting with webpack@5 which comes shipped with its own typings (see related issues #51712 and #49755).

There doesn't seem to be a easy solution within the context of DT since any solution would come with unwanted side-effects.

Easiest solution would be for webpack-node-externals to include typings itself so that it no longer depended on DT.

Workaround for now:

import type { Configuration } from 'webpack';

export default function config(): Configuration ({
  externals: [
    nodeExternals(),
  ] as Configuration['externals'],
});