HMR is broken

[flunderpero]

Current behavior

When I run styleguidist server I get this in the browser console:

main.bundle.js:10926 Uncaught ReferenceError: process is not defined
    at eval (webpackHotDevClient.js:63)
    at Object../node_modules/react-dev-utils/webpackHotDevClient.js (main.bundle.js:4329)
    at __webpack_require__ (main.bundle.js:10923)
    at main.bundle.js:11966
    at main.bundle.js:11970

HMR is obviously not working. With webpack 5 process is no longer defined and the webpackHotDevClient.js first looks into process.env and then falls back to location in order to find the right HMR server. I think styleguidist just uses an old version.

The problem has been reported elsewhere, too: vue-styleguidist/vue-styleguidist#1044

To reproduce

Just start styleguidist 11.1.6 in server mode and look into the browser console.

Workaround
My current workaround is to define process.env like this in styleguide.config.js:

    webpackConfig: {
        plugins:[
            new webpack.DefinePlugin({
                process: {env: {}}
            })
        ]
    }

[elevatebart]

@sapegin It feels like we could mock process, if it does not exist ;)
Should I make a PR?

[sapegin]

Sure, if that helps ;-)

[vileen]

Huh, weird, for me it helped but caused another error WebSocket connection to 'ws://localhost:9000/sockjs-node' failed: and I don't even have sockjs-node

[schorfES]

As @flunderpero wrote, it's caused due to a miss-match between the webpack version and the styleguidist webpack-configuration. Styleguidist targets v4 of webpack, while following the getting started docs v5 would be installed as latest version. If there are no other dependencies in you project to webpack at version 5, you should downgrade webpack by running npm i -D webpack@4 – that helped me.

[adamjw3]

I've ran into the same error, i'm using next js and sass (webpack 5). @flunderpero i tried your fix with the plugins options but didn't work. can you share your full solution?

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.