🎓 Webpack(er) compatibility issue

TL:DR; Rails Webpacker¹ 5.x is not compatible with Webpack Dev Server² 4.x.

What does the issue look like?

The command moved into a separate package: @webpack-cli/serve
Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) : yes

After running bin/webpack-dev-server in a Rails project

Then after selecting yes and running the bin/webpack-dev-server command again we get

TypeError: Class constructor ServeCommand cannot be invoked without 'new'
...
 return func(...args);
               ^

TypeError: Class constructor ServeCommand cannot be invoked without 'new'

Investigation

The Webpack Dev Server² has recently been updated from version 3.x to 4.x.

This upgrade seems to have changed the underlying Node command to start the dev server from webpack-dev-server to webpack serve.

Webpacker¹ is currently on version 5.4 which has the outdated Webpack Dev Server² version 3.x syntax.

Webpacker¹ is under development and the command has been changed in the upcoming version 6.x as can be seen on the main branch of the repo.

Solution(s)

There are 2 possible solutions to this issue.

1. Downgrade Webpack Dev Server² to version 3.x
2. Upgrade Webpacker¹ to (beta) version 6.x

For client/production projects it would be advisable to choose option 1 - downgrading Webpack Dev Server² to version 3.x

For side projects it should be safe enough to choose option 2 - upgrading Webpacker¹ to (beta) version 6.x.

1. Ruby gem wrapping the JS package Webpack³ - GitHub ↩ ↩² ↩³ ↩⁴ ↩⁵

2. Underlying JS package used by Webpack³ to run a development server - GitHub ↩ ↩² ↩³ ↩⁴ ↩⁵

3. Javascript pre-processor - GitHub ↩ ↩²