Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for Webpack v5 #1703

Closed
jasonwilliams opened this issue Oct 23, 2020 · 6 comments · Fixed by #1707
Closed

Support for Webpack v5 #1703

jasonwilliams opened this issue Oct 23, 2020 · 6 comments · Fixed by #1707
Labels
help wanted released

Comments

@jasonwilliams
Copy link
Collaborator

jasonwilliams commented Oct 23, 2020 •
edited
Loading

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
Copy link
Member

sapegin commented Oct 28, 2020

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

@sapegin sapegin pinned this issue Oct 28, 2020
@jasonwilliams
Copy link
Collaborator Author

jasonwilliams commented Oct 30, 2020 •
edited
Loading

#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.

@jasonwilliams jasonwilliams mentioned this issue Nov 1, 2020
Merged
sapegin pushed a commit that referenced this issue Nov 5, 2020
@jasonwilliams
chore: Partial webpack 5 support (#1707)
3499c5d 
Refs #1703

* Inline loaders and ! prefixes should not be used as they are non-standard. They may be used by loader generated code.
https://webpack.js.org/configuration/module/#ruleenforce
* Adds support for both Webpack 4 and 5 in StyleguidistOptionsPlugin
* Updates dependencies in Webpack example (easier to test against)
* Because automatic polyfilling is switched off in 5, assert was brought in as a dependency (it's used by Doctrine, see below)

## Upstream issues

Both issues below are tied to facebook/create-react-app#7929:

* Process is not defined - The page still builds but this error will show in the console. I can't seem to polyfill this if anyone else can that would be great, then I think we're done.
* TypeError: message.split is not a function - you may not get this error, but if you do it's related to facebook/create-react-app#7929. The quick fix is to go into node_modules/react-dev-utils/formatWebpackMessages.js:19 and add the code from facebook/create-react-app#7929 (comment)

## Not needed for this but nice to have.

Doctrine should be replaced with another JSDoc parser. Doctrine is end of life and no longer supported. It causes problems with Webpack 5 because it pulls in assert which WP5 does not polyfill. For now, we can fix it by adding those polyfills (assert) but a more stable solution should be found. The issue raised: #1708
@styleguidist-bot
Copy link
Collaborator

🎉 This issue has been resolved in version 11.1.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@sapegin sapegin reopened this Nov 11, 2020
@sapegin
Copy link
Member

sapegin commented Nov 11, 2020

Reopening since it's only partially fixed.

@jasonwilliams
Copy link
Collaborator Author

Mainly waiting on
facebook/create-react-app#9994

@zcfan

This comment has been minimized.

Sign in to view
@styleguidist styleguidist locked as spam and limited conversation to collaborators Dec 9, 2020
@ThomasRoest ThomasRoest unpinned this issue Oct 6, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
help wanted released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

support Webpack 5 jasonwilliams/react-styleguidist
4 participants
@sapegin @jasonwilliams @zcfan @styleguidist-bot