Issues working with Webpack Dev Middleware in server rendering environments

Hey,

I’m not sure if this has to do with this Webpack plugin or with Webpack itself, with Webpack Dev Middleware and in general, I’m not even sure if this makes sense at all.

I’ve just spent two hours to get this really great plugin working in a custom Server Side Rendering environment that’s currently using Webpack Dev Middleware (WDM) as Webpack’s dev server and Webpack Hot Middleware (WHM) for HMR.

The issues I encountered:

• While my actual server rendered application is served on localhost:8500, my WDM is running on port 8501, but the socket connection is always created for window.location.port and is not configurable (yet)
• After I manually changed the port to 8501 in runtime/createSocket.js, it’s still not working. There’s an outgoing request to http://localhost:8501/sockjs-node/info?t=1579726105901 but it looks like WDM isn’t listening to a /socksjs-node/info route: Cannot GET /sockjs-node/info
• POST /sockjs-node/213/kxx15upe/xhr_streaming also gives me a 404
• Universal components that are also used on the server side fail because $RefreshSig$ is not defined, which seems obvious because they are only defined when we’re in a browser environment.:

ReferenceError: $RefreshSig$ is not defined
    at eval (webpack:///./src/shared/i18n/IntlProvider.tsx?:17:10)
    at Module../src/shared/i18n/IntlProvider.tsx (build/server/server.js:5202:1)

The last one makes sense but maybe we could just assign () => {} noops to global.$RefreshSig$ and global.$RefreshReg$?!

After all, I’m not really sure if this plugin does even make sense in universal rendering scenarios. If it does, I’d be happy to get some helpful hints how this could be integrated into my certainly little bit unusual but probably not that exotic setup.

// edit: current state of my implementation attempt can be found here: https://github.com/manuelbieh/react-ssr-setup/compare/feature/react-refresh

[ianvieira]

I had the same problem with the $RefreshSig$, in the end, it was caused by the cache-loader. As my client build runs before the server one, my server was using the cached version to the client.

To avoid it, check if you have any cache that can be shared between the two compilers (as cache-loader or babel-loader cache).

[Ephem]

This was solved by the v0.3 release for me.

I use dev- and hot-middleware in a custom SSR-setup which previously did not work, but by following the Readme and using this config everything now works out of the box:

new ReactRefreshWebpackPlugin({
  overlay: {
    sockIntegration: 'whm',
  },
}),