React-styleguidist: Support for Webpack v5

[jasonwilliams]

Is there any plan to add support for Webpack v5?
I get this deprecation warning for styleguidist server

(node:2280) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
    at getNormalModuleLoader ([dir]/node_modules/webpack/lib/Compilation.js:297:39)
    at Object.get normalModuleLoader [as normalModuleLoader] ([dir]/node_modules/webpack/lib/Compilation.js:603:12)
    at StyleguidistOptionsPlugin.plugin ([dir]/node_modules/react-styleguidist/lib/scripts/utils/StyleguidistOptionsPlugin.js:30:18)
    at Hook.eval [as call] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:100:1)
    at Hook.CALL_DELEGATE [as _call] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation ([dir]/node_modules/webpack/lib/Compiler.js:919:26)
    at [dir]/node_modules/webpack/lib/Compiler.js:960:29
    at Hook.eval [as callAsync] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile ([dir]/node_modules/webpack/lib/Compiler.js:955:28)
    at [dir]/node_modules/webpack/lib/Watching.js:113:19
    at Hook.eval [as callAsync] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at run ([dir]/node_modules/webpack/lib/Watching.js:67:33)
    at Watching._go ([dir]/node_modules/webpack/lib/Watching.js:124:4)
    at [dir]/node_modules/webpack/lib/Watching.js:58:9

this is ok it does eventually run.

the biggest problem is build, that completely fails.
styleguidist build

Building style guide...
(node:2297) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
    at getNormalModuleLoader ([dir]/node_modules/webpack/lib/Compilation.js:297:39)
    at Object.get normalModuleLoader [as normalModuleLoader] ([dir]/node_modules/webpack/lib/Compilation.js:603:12)
    at StyleguidistOptionsPlugin.plugin ([dir]/node_modules/react-styleguidist/lib/scripts/utils/StyleguidistOptionsPlugin.js:30:18)
    at Hook.eval [as call] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:100:1)
    at Hook.CALL_DELEGATE [as _call] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation ([dir]/node_modules/webpack/lib/Compiler.js:919:26)
    at [dir]/node_modules/webpack/lib/Compiler.js:960:29
    at Hook.eval [as callAsync] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile ([dir]/node_modules/webpack/lib/Compiler.js:955:28)
    at [dir]/node_modules/webpack/lib/Compiler.js:456:12
    at Compiler.readRecords ([dir]/node_modules/webpack/lib/Compiler.js:797:11)
    at [dir]/node_modules/webpack/lib/Compiler.js:453:11
    at Hook.eval [as callAsync] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at [dir]/node_modules/webpack/lib/Compiler.js:450:20
(node:2297) [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_*.
    at [dir]/node_modules/mini-html-webpack-plugin/index.js:27:33
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
TypeError: message.split is not a function
    at formatMessage ([dir]/node_modules/react-dev-utils/formatWebpackMessages.js:19:23)
    at [dir]/node_modules/react-dev-utils/formatWebpackMessages.js:110:12
    at Array.map (<anonymous>)
    at formatWebpackMessages ([dir]/node_modules/react-dev-utils/formatWebpackMessages.js:109:39)
    at [dir]/node_modules/react-styleguidist/lib/bin/styleguidist.js:118:22
    at Hook.eval [as callAsync] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at [dir]/node_modules/webpack/lib/Compiler.js:430:23
    at Compiler.emitRecords ([dir]/node_modules/webpack/lib/Compiler.js:751:39)
    at [dir]/node_modules/webpack/lib/Compiler.js:422:11
    at [dir]/node_modules/webpack/lib/Compiler.js:733:14
    at Hook.eval [as callAsync] (eval at create ([dir]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([dir]/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at [dir]/node_modules/webpack/lib/Compiler.js:730:27
    at [dir]/node_modules/neo-async/async.js:2818:7
    at done ([dir]/node_modules/neo-async/async.js:3522:9)

• Webpack Version: v5.2.0
• react-styleguidist version: v11.1.0

To reproduce

Update to webpack v5 and try building with Styleguidist

[sapegin]

Feel free to send a pull request with a fix! However, we'll have to support webpack 4 and 5 for some time.

[jasonwilliams]

https://github.com/styleguidist/react-styleguidist/pull/1707 now fixes everything Styleguidist needs to support Webpack 5
It will need review and there are upstream issues, but they're out of our control here.

[styleguidist-bot]

:tada: This issue has been resolved in version 11.1.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[sapegin]

Reopening since it's only partially fixed.

[jasonwilliams]

Mainly waiting on
https://github.com/facebook/create-react-app/issues/9994

[zcfan]

11.1.5 Still getting this error when yarn styleguidist build

TypeError: message.split is not a function

when using yarn styleguidist server, it tell nothing when compilation failed.

to temporarily fix this problem, change the formatMessage function in formatWebpackMessages.js in react-dev-utils dependency.

from:

function formatMessage(message) {
  let lines = message.split('\n');
  // ...
}

to:

function formatMessage(message) {
  let lines = message.message.split('\n'); // add a extra 'message' here
  // ...
}