Support webpack 5

Current behavior

After upgrading to our app to webpack5 https://github.com/nextcloud/nextcloud-vue/pull/1781, vue-styleguidist build fails with the following output:

Building style guide ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    92%(node:70115) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
Building style guide ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 99%TypeError: message.split is not a function
    at formatMessage (/var/www/nextcloud/apps/nextcloud-vue/node_modules/react-dev-utils/formatWebpackMessages.js:18:23)
    at Array.map (<anonymous>)
    at formatWebpackMessages (/var/www/nextcloud/apps/nextcloud-vue/node_modules/react-dev-utils/formatWebpackMessages.js:106:39)
    at /var/www/nextcloud/apps/nextcloud-vue/node_modules/vue-styleguidist/lib/scripts/binutils.js:98:58
    at Hook.eval [as callAsync] (eval at create (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at emitRecords.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:468:23)
    at Compiler.emitRecords (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:846:39)
    at emitAssets.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:460:11)
    at hooks.afterEmit.callAsync.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:828:14)
    at eval (eval at create (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at compiler.hooks.afterEmit.tapAsync (/var/www/nextcloud/apps/nextcloud-vue/node_modules/stylelint-webpack-plugin/dist/linter.js:65:7)
    at Hook.eval [as callAsync] (eval at create (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at asyncLib.forEachLimit.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:825:27)
    at /var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/neo-async/async.js:2818:7
    at done (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/neo-async/async.js:3522:9)
    at alreadyWritten (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:668:8)
    at outputFileSystem.readFile (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:756:19)
    at /var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

The main reason for the failure seems to be TypeError: message.split is not a function. A similar problem was also reported for react-styleguidist: https://github.com/styleguidist/react-styleguidist/issues/1703. Maybe this helps finding the reason for the problem.

[skjnldsv]

Bump! 5.0.0 is now released https://github.com/facebook/create-react-app/releases/tag/v5.0.0

[dominik-bln]

Should Webpack 5 be working with v4.44.18 or is the fix not released yet? With the above version we are still seeing:

node --trace-deprecation ./node_modules/.bin/vue-cli-service styleguidist
ℹ ｢wds｣: Project is running at http://localhost:6060/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /Users/horbd/Projects/alpha/alpha/frontend/public

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://192.168.178.72:6060/

Compiling ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    93%(node:32276) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation..
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at /Users/horbd/Projects/alpha/alpha/frontend/node_modules/mini-html-webpack-plugin/index.js:27:33
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)