If you familier with Create react app and the prefix bug, you came to right place!

The problematic code:

// Connect to WebpackDevServer via a socket.
var connection = new SockJS(
  url.format({
    protocol: window.location.protocol,
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

As you can see in the above code, the sockJS implementation is Hard Coded in the code, that's mean that you can't add prefix to your development hmr socket.

if you will try to use your app with prerix for example

http://localhost:3000/prefix

it's not gonna work, no metter how hard you will try.

react-utils-hmr-prefix will help you to accomplish the above with minimum changes.

npm i react-utils-hmr-prefix -D

• use eject (link)

webpack.config.dev.js

require.resolve('react-dev-utils/webpackHotDevClient') // this line should be change to the line below
require.resolve('react-utils-hmr-prefix')

env.js

 PUBLIC_URL: publicUrl,
 SOCK_JS_PREFIX: 'myCustomPrefix' //add this line to the file with your prefix

public/index.html

 <!-- add this line into your head tag -->
 <meta id="dev-sock-js" content="%SOCK_JS_PREFIX%">

Those actions will create socket on yout origin + the custom prefix, for example http://localhost:3000/myCustomPrefix