Webpack 5 support

[juanca]

Motivation

Allow a host application with Webpack 5 to use react-styleguidist.

Technical changes

• Upgraded react-dev-utils to latest version v12 (supports Webpack 5)
• Fixed Webpack example for local testing
• Upgraded webpack related dependencies for maintainence: webpack, webpack-cli, and webpack-dev-server
• Removed unnecessary Webpack configuration around Hot Module Replacement. AFAIK, webpack-dev-server will automatically inject HMR related configurations already.

[juanca]

If possible, I would like to get more 👀 on a webpack 5 compatible version. Can someone release a next version with these changes? If so, I can clean this up.

Let me know!

[juanca]

Heyo! v12 finally landed!. I'll get this updated, tested against my use-case, and then trim the artifacts (I don't really git-rebase so let me know if you need a pristine log history).

[juanca]

AFAIK, this is automatically injected by the webpack dev server. My local dev environment seems to be auto-loading new code changes.

[juanca]

It looks like this example was broken and needed to include the Webpack config. I'm not sure if I ran the example incorrectly.

[sapegin]

This shouldn't be necessary: Styleguidist finds webpack.config.js in the project root.

[juanca]

This is ready for review.

• I am not really sure what is going on with the CD pipeline.
• Tests are passing locally.
• Examples are working locally.
• Test repository for integration testing is working in development and production.

[sapegin]

Thanks for the fixes!

Does it still work with webpack 4? If not, we should change the minimum version and release it as a major version.

[sapegin]

This shouldn't be necessary: Styleguidist finds webpack.config.js in the project root.

[juanca]

This shouldn't be necessary: Styleguidist finds webpack.config.js in the project root.

I think this might be a side-effect of running the example in a nested directory:

node lib/bin/styleguidist.js server --config examples/webpack/styleguide.config.js

without an explicit Webpack configuration in the Styleguidist configuration results in:

./examples/webpack/src/components/Placeholder.js 10:18
Module parse failed: Unexpected token (10:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| export default class Placeholder extends Component {
>       static propTypes = {
|               type: PropTypes.oneOf([
|                       'animal',
 @ ./lib/client/index.js (./lib/loaders/styleguide-loader.js!./lib/client/index.js) 44:30-130
 @ ./lib/client/index.js
 @ multi ./lib/client/index

[juanca]

Re: Webpack 4

I think it still works with Webpack ^4.46.0. Re-ran the example with i: no console errors and HMR was working.

[juanca]

I made this change to get the automatic Webpack configuration to work. This means you can run this particular package.json from its directory and it will treat itself as the root directory. This also means it will use the current working compiled code for react styleguidist when running this example. I think that's a better experience for developers because you will want to make changes to the library and test them against a local example. /cc @sapegin

[juanca]

cd examples/webpack
npm install
npm run build
npm run styleguide

[sapegin]

This is awesome!

[juanca]

If we're okay with the existing change set, I can go ahead and fix the merge conflicts.

[sapegin]

🍨

[juanca]

@sapegin If you make a pre-release, I can test it out on my repository as well.

[sapegin]

Making a prerelease is way too much work for me (and I dont't have neither time nor motivation to do any open source now), so I'm merging it as is and praying that semantic-release still works ;-)

Thanks for the fix! 🤗