[webpack-config-terra][terra-functional-testing] DevServer configuration is invalid for webpack-dev-server v4

[juzerzarif]

Bug Report

Description

When trying to upgrade to webpack v5 (recommended by terra-dev-site here) and webpack-dev-server v4, the webpack config provides a devServer configuration that is following the v3 API resulting in this error:

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'stats'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

Downgrading just webpack-dev-server to v3 causes hot reloading to stop working (webpack will re-compile but the dev server will not reload the site).

If you patch the webpack config to support webpack-dev-server v4, it becomes invalid when running WDIO tests with terra-functional-testing because the AssetServerService in there uses webpack-dev-server v3.

Right now the result is, despite webpack-config-terra supporting webpack v5, I still have to stay on webpack v4 (and webpack-dev-server and webpack-cli v3) to make all the other tools in the ecosystem work nicely.

Steps to Reproduce

1. Upgrade webpack to v5, webpack-cli and webpack-dev-server to v4
2. Create a webpack configuration with @cerner/webpack-config-terra and @cerner/terra-dev-site

Expected Behavior

The terra tools should detect the installed versions of the webpack tools and provide appropriate configurations.

Possible Solution

Along with checking the webpack version, webpack-config-terra should also check the webpack-dev-server version to determine the appropriate configuration for devServer.

terra-functional-testing should have a peer dependency on webpack-dev-server and should likewise provide the appropriate configuration based on the installed version.

Environment

• Component Name and Version: @cerner/[email protected] & @cerner/[email protected]
• Node/npm Version: [e.g. Node 8/npm 5]: Node 14.18.1/npm 6.14.15
• Webpack Version: webpack@5 & webpack-cli@4 & webpack-dev-server@4
• Operating System and version (desktop or mobile): MacOS desktop

@ Mentions

[ryanthemanuel]

@juzerzarif we will work on fixing this. I moved this to our internal tracking system. Ping me if you want to track on it.