razzle-plugin-proxy@1.1.3 .../node-js location returns 404

Question

razzle-plugin-proxy@1.1.3 .../node-js location returns 404

laurencefass opened this issue 5 years ago · 47 comments

ive using the default create-razzle-app and razzle-plugin-proxy. I am using the config below and getting repeated 404s for requests to

https://apps.syntapse.co.uk/razzle-dev/webpack/sockjs-node/info?t=...

bash-4.4# pwd
/app/razzle/razzle
bash-4.4# npm ls --depth 0
my-razzle-app@0.1.0 /app/razzle/razzle
+-- express@4.17.1
+-- razzle@3.0.0
+-- razzle-plugin-proxy@1.1.3
+-- react@16.11.0
+-- react-dom@16.11.0
`-- react-router-dom@5.1.2

npm ERR! extraneous: babel-core@7.0.0-bridge.0 /app/razzle/razzle/node_modules/babel-jest/node_modules/babel-core

I have provided the config below.

razzle.config.js

module.exports = {
    // modify: (config, { target, dev }, webpack) => {
    //     return config;
    // },
    plugins: ['proxy']
};

.env

HOST='apps.syntapse.co.uk'
VERBOSE='true'

# dev mode
PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-dev'
CLIENT_PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-dev/webpack'
PORT=3000

# production mode (run with start:prod)
# PUBLIC_PATH=https://apps.syntapse.co.uk
# PORT=3002

nginx redirects

server {
    listen 80;
    server_name apps.syntapse.co.uk;
    # dev webpack
    location  ^~ /razzle-dev/webpack {
        proxy_pass http://0.0.0.0:3001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    # dev sockjs_node
    location  ^~ /razzle-dev/webpack/sockjs-node {
        proxy_pass http://0.0.0.0:3001/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }         
    # dev root
    location  ^~ /razzle-dev {
        proxy_pass http://0.0.0.0:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }    
}

the result on loading this app is repeated 404s on the socket-node URL.

fivethreeo commented 5 years ago

yes

fivethreeo commented 5 years ago

^~ ?

fivethreeo commented 5 years ago

root?

fivethreeo commented 5 years ago

Yay :)

Answer 1 · 2019-10-31T14:56:54.000Z

Only two proxy pass needed now

server {
    listen 80;
    server_name apps.syntapse.co.uk;
    # dev webpack
    location  ^~ /razzle-dev/webpack {
        proxy_pass http://0.0.0.0:3001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    # dev root
    location  ^~ /razzle-dev {
        proxy_pass http://0.0.0.0:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }    
}

Don't check deps with npm when using yarn :)

Answer 2 · 2019-10-31T15:05:15.000Z

the erroneous urls return "Cannot GET //sockjs-node/info"
e.g.
https://apps.syntapse.co.uk/razzle-dev/webpack/sockjs-node/info?t=...

If I remove the webpack part I get a 200 reply
e.g.
https://apps.syntapse.co.uk/razzle-dev/sockjs-node/info?t=...

I think the correct (and relevant) paths appear to be

domain.com/razzle-dev
domain.com/razzle-dev/webpack
domain.com/razzle-dev/sockjs-node

Answer 3 · 2019-10-31T15:07:20.000Z

server {
    listen 80;
    server_name apps.syntapse.co.uk;
    # dev webpack
    location  ^~ /razzle-dev/webpack {
        proxy_pass http://0.0.0.0:3001;
        # remove the slash
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    # dev root
    location  ^~ /razzle-dev {
        proxy_pass http://0.0.0.0:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }    
}

Answer 4 · 2019-10-31T15:10:36.000Z

may i ask why have you removed slash from :3001?

Answer 5 · 2019-10-31T15:12:05.000Z

/ strips the matched path before passing it on

without the path is kept

Answer 6 · 2019-10-31T15:16:46.000Z

latest change breaks all the links. env and razzle.config.js only things change from default create-razzle-app.

env

HOST='apps.syntapse.co.uk'
VERBOSE='true'

# dev mode
PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-dev'
CLIENT_PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-dev/webpack'
PORT=3000

nginx

server {
    listen 80;
    server_name apps.syntapse.co.uk;
    # dev sockjs_node
    location  ^~ /razzle-dev/webpack {
        proxy_pass http://0.0.0.0:3001;
        # remove the slash
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    # dev root
    location  ^~ /razzle-dev {
        proxy_pass http://0.0.0.0:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }  
    # or use prod	
    # location  ^~ /razzle-prod {
    #     proxy_pass http://0.0.0.0:3002/;
    #     proxy_http_version 1.1;
    #     proxy_set_header Upgrade $http_upgrade;
    #     proxy_set_header Connection 'upgrade';
    #     proxy_set_header Host $host;
    #     proxy_cache_bypass $http_upgrade;
    # }    	
}

result is broken links on everything and page doesnt load at all.

Answer 7 · 2019-10-31T15:20:32.000Z

https://apps.syntapse.co.uk/razzle-dev/webpackstatic/media/react.9a28da9f.svg

Answer 8 · 2019-10-31T15:20:33.000Z

also as stated in #1 (comment) the sockjs-node address looked wrong removing the webpack prefix appears to be correct url

Answer 9 · 2019-10-31T15:23:27.000Z

maybe easier: can you post your nginx proxy setting, .env and (minimal) config.js files?

Answer 10 · 2019-10-31T15:26:45.000Z

Lol

More slashes

server {
    listen 80;
    server_name apps.syntapse.co.uk;
    # dev webpack
    #here
    location  ^~ /razzle-dev/webpack/ {
        proxy_pass http://0.0.0.0:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    # dev root
    #here
    location  ^~ /razzle-dev/ {
        proxy_pass http://0.0.0.0:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }    
}

Answer 11 · 2019-10-31T15:29:44.000Z

Re-instating the slash on proxy_pass http://0.0.0.0:3001; gives me correct 200 on assets and an incorrect /razzle-dev/webpack/sockjs-node url.

Should it be /razzle-dev/sockjs-node? This gives a 200 reply on all those erronous calls to the address

Answer 12 · 2019-10-31T15:32:56.000Z

just on the locations not the proxy pass, i saw it added a double slash before passing the location on

Answer 13 · 2019-10-31T15:34:48.000Z

apoligies i dont understand assessment is this a config error or is package update required. i would prefer to avoid further rewrites in nginx if possible.

Answer 14 · 2019-10-31T15:38:38.000Z

to test from alternative perspective i have stripped out the /razzle-dev/ path from both .env and nginx config so my public path is https://apps.syntapse.co.uk

this results in sequence of calls to....

https://apps.syntapse.co.uk/webpack/sockjs-node/info?t=....

this returns a 200 if i strip /webpack/ so I think this section of path is surplus to requirements and should be removed.

Answer 15 · 2019-10-31T15:48:24.000Z

I'm going to look into it more in depth today, follow your steps that is :)
and try to figure it out.

Answer 16 · 2019-10-31T15:50:50.000Z

i think /webpack/ may be surplus to the /webpack/sockjs-node/ path.

Answer 17 · 2019-10-31T15:58:26.000Z

Please can you post working razzle.config.js, nginx.conf and .env file if/when you have this working.

Answer 18 · 2019-10-31T16:15:26.000Z

i will leave https://apps.syntapse.co.uk/razzle-dev/ running.

Answer 19 · 2019-10-31T16:35:14.000Z

I think the CLIENT_PATH and PUBLIC_PATH need to have trailing slashes

process.env.PUBLIC_PATH: Only in used in razzle build. You can alter the webpack.config.output.publicPath of the client assets (bundle, css, and images). This is useful if you plan to serve your assets from a CDN. Make sure to include a trailing slash (e.g. PUBLIC_PATH=https://cdn.example.com/). If you are using React and altering the public path, make sure to also include the crossorigin attribute on your <script> tag in src/server.js.

process.env.CLIENT_PUBLIC_PATH: The NODE_ENV=development build's BUILD_TARGET=client has a different PUBLIC_PATH than BUILD_TARGET=server. Default is http://${process.env.HOST}:${process.env.PORT + 1}/

so my latest env file looks like this:

PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-dev/'
CLIENT_PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-dev/webpack/'
PORT=3000

this is causing problems with paths e.g. note the two slashes....

https://apps.syntapse.co.uk/razzle-dev/webpack**//**sockjs-node/info?t=1572540472393

I think for consitency with Razzle I end slashes should be included and any other config or plugin should be defined to be in accordance with the rule...

Answer 20 · 2019-11-01T00:51:41.000Z

sudo npm install -g npx

create-razzle-app testrazzle
cd testrazzle

yarn add razzle-plugin-proxy

echo PUBLIC_PATH=https://razzle.hongri.no/testrazzle/ > .env

echo CLIENT_PUBLIC_PATH=https://razzle.hongri.no/testrazzle/webpack/ > .env

export CERTS_VOLUME=nginx_certs
export VHOST_D_VOLUME=nginx_vhost_d
export HTML_VOLUME=nginx_html
export LETSENCRYPT_DEFAULT_EMAIL=email@example.com
export VIRTUAL_HOST=razzle.hongri.no


cat << EOF > razzle.config.js
'use strict';

module.exports = {
  plugins: [ 'proxy' ]
};
EOF


cat << EOF > default.conf
server {
  listen 80;
  server_name ${VIRTUAL_HOST};
  
  location /testrazzle/webpack/ {
    proxy_pass http://10.0.0.1:3001/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade \$http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host \$host;
    proxy_cache_bypass \$http_upgrade;
  }     

  
  location /testrazzle/webpack/sockjs-node { # needs newer webpack-dev-server
    proxy_pass http://10.0.0.1:3001/sockjs-node/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade \$http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host \$host;
    proxy_cache_bypass \$http_upgrade;
  }     

  location /testrazzle/ {
    proxy_pass http://10.0.0.1:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade \$http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host \$host;
    proxy_cache_bypass \$http_upgrade;
  }     
}
EOF

cat << EOF > docker-compose.yml
version: "3.7"

services:
  nginx:
    image: nginx:alpine
    ports:
     - "80:80"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
    networks:
      - dockernet
    environment:
      VIRTUAL_HOST: ${VIRTUAL_HOST}
      LETSENCRYPT_HOST: ${VIRTUAL_HOST}
      
EOF

cat << EOF > docker-compose.proxy.yml
version: "3.7"

services:
  nginx-proxy:
    image: jwilder/nginx-proxy
    ports:
     - "80:80"
     - "443:443"
    volumes:
      - certs:/etc/nginx/certs:ro
      - vhost_d:/etc/nginx/vhost.d
      - html:/usr/share/nginx/html
      - /var/run/docker.sock:/tmp/docker.sock:ro
    labels:
      - com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy
      

  nginx-proxy-letsencrypt:
    image: jrcs/letsencrypt-nginx-proxy-companion
    volumes:
      - certs:/etc/nginx/certs
      - vhost_d:/etc/nginx/vhost.d
      - html:/usr/share/nginx/html
      - /var/run/docker.sock:/var/run/docker.sock:ro
    environment:
      DEFAULT_EMAIL: ${LETSENCRYPT_DEFAULT_EMAIL}
      
volumes:
  certs:
    external:
      name: ${CERTS_VOLUME}
  vhost_d:
    external:
      name: ${VHOST_D_VOLUME}
  html:
    external:
      name: ${HTML_VOLUME}

EOF

docker volume create ${CERTS_VOLUME}
docker volume create ${VHOST_D_VOLUME}
docker volume create ${HTML_VOLUME}

sudo docker-compose -f docker-compose.yml up -d

sudo docker-compose -f docker-compose.proxy.yml up -d

change

<Route exact path="/" component={Home} />

to

<Route exact path="/testrazzle/" component={Home} />

in App.js

Add

  <link rel="shortcut icon" href="/testrazzle/static/favicon.ico">

To server.js

yarn start

Answer 21 · 2019-11-01T12:37:56.000Z

URL http://razzle.hongri.no/testrazzle is timing out do you have a working live version?

Answer 22 · 2019-11-01T12:59:07.000Z

Ive applied the nginx and .env config to my own server and im experiencing exactly the same timeout.

Answer 23 · 2019-11-01T13:37:45.000Z

https://razzle.hongri.no/testrazzle/ up now

Answer 24 · 2019-11-01T13:42:54.000Z

Updated nginx config for backend to add LETSENCRYPT_HOST: ${VIRTUAL_HOST}

echo PUBLIC_PATH=https://razzle.hongri.no/testrazzle/ > .env
echo CLIENT_PUBLIC_PATH=https://razzle.hongri.no/testrazzle/webpack/ >> .env

Answer 25 · 2019-11-01T13:53:21.000Z

sudo npm install -g npx

create-razzle-app testrazzle
cd testrazzle

yarn add razzle-plugin-proxy

echo PUBLIC_PATH=https://razzle.hongri.no/testrazzle/ > .env

echo CLIENT_PUBLIC_PATH=https://razzle.hongri.no/testrazzle/webpack/ >> .env

export CERTS_VOLUME=nginx_certs
export VHOST_D_VOLUME=nginx_vhost_d
export HTML_VOLUME=nginx_html
export LETSENCRYPT_DEFAULT_EMAIL=email@example.com
export VIRTUAL_HOST=razzle.hongri.no


cat << EOF > razzle.config.js
'use strict';

module.exports = {
  plugins: [ 'proxy' ]
};
EOF


cat << EOF > default.conf
server {
  listen 80;
  server_name ${VIRTUAL_HOST};
  
  location /testrazzle/webpack/ {
    proxy_pass http://10.0.0.1:3001/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade \$http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host \$host;
    proxy_cache_bypass \$http_upgrade;
  }     

  
  location /testrazzle/webpack/sockjs-node/ {
    proxy_pass http://10.0.0.1:3001/sockjs-node/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade \$http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host \$host;
    proxy_cache_bypass \$http_upgrade;
  }     

  location /testrazzle/ {
    proxy_pass http://10.0.0.1:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade \$http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host \$host;
    proxy_cache_bypass \$http_upgrade;
  }     
}
EOF

cat << EOF > docker-compose.yml
version: "3.7"

services:
  nginx:
    image: nginx:alpine
    ports:
     - "80:80"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
    networks:
      - dockernet
    environment:
      VIRTUAL_HOST: ${VIRTUAL_HOST}
      LETSENCRYPT_HOST: ${VIRTUAL_HOST}

EOF

cat << EOF > docker-compose.proxy.yml
version: "3.7"

services:
  nginx-proxy:
    image: jwilder/nginx-proxy
    ports:
     - "80:80"
     - "443:443"
    volumes:
      - certs:/etc/nginx/certs:ro
      - vhost_d:/etc/nginx/vhost.d
      - html:/usr/share/nginx/html
      - /var/run/docker.sock:/tmp/docker.sock:ro
    labels:
      - com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy
      

  nginx-proxy-letsencrypt:
    image: jrcs/letsencrypt-nginx-proxy-companion
    volumes:
      - certs:/etc/nginx/certs
      - vhost_d:/etc/nginx/vhost.d
      - html:/usr/share/nginx/html
      - /var/run/docker.sock:/var/run/docker.sock:ro
    environment:
      DEFAULT_EMAIL: ${LETSENCRYPT_DEFAULT_EMAIL}
      
volumes:
  certs:
    external:
      name: ${CERTS_VOLUME}
  vhost_d:
    external:
      name: ${VHOST_D_VOLUME}
  html:
    external:
      name: ${HTML_VOLUME}

EOF

docker volume create ${CERTS_VOLUME}
docker volume create ${VHOST_D_VOLUME}
docker volume create ${HTML_VOLUME}

sudo docker-compose -f docker-compose.yml up -d

sudo docker-compose -f docker-compose.proxy.yml up -d

change

<Route exact path="/" component={Home} />

to

<Route exact path="/testrazzle/" component={Home} />

in App.js

Add

  <link rel="shortcut icon" href="/testrazzle/static/favicon.ico">

To server.js

yarn start

Answer 26 · 2019-11-01T14:07:26.000Z

razzle-plugin-proxy@1.2.0 or 1.2.1 last is just a doc fix

Answer 27 · 2019-11-01T14:44:47.000Z

i've udpated to latest proxy plugin version the delay is gone still not loading. the paths to the resources dont load if loaded directly into address bar. Razzle server is serving 200 on incorrect file paths.

latest: https://apps.syntapse.co.uk/razzle-dev

Answer 28 · 2019-11-01T14:48:16.000Z

side note: 2 weeks in still not Razzle server and I'm wondering why this not a base feature that Razzle could support out the box. I am running a number of other JS clients all started HMR first time no problem. Is this design defect of Razzle?

Answer 29 · 2019-11-01T14:49:38.000Z

It is because razzle is old and needs to update its deps :)

Answer 30 · 2019-11-01T14:51:12.000Z

Can you post your nginx backend conf?

Answer 31 · 2019-11-01T14:52:35.000Z

sorry which bit? do you mean default.conf? i've copied and pasted from example above. tried every possible combination of forward slashes/end slashes/on everything. cant get it to load with assets in dev.

Answer 32 · 2019-11-01T14:54:40.000Z

so my default.conf looks like this. note I added root directive to make it easier to change other than that i think its identical. ill leave the site up.

server {
    listen 80;
    server_name apps.syntapse.co.uk;
    root /razzle-dev;
    location ^~ /webpack/sockjs-node/ { 
        proxy_pass http://0.0.0.0:3001/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host \$host;
        proxy_cache_bypass \$http_upgrade;
    }     
    location ^~ /webpack/ {
        proxy_pass http://0.0.0.0:3001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host \$host;
        proxy_cache_bypass \$http_upgrade;
    }      	
    location / {
        proxy_pass http://0.0.0.0:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host \$host;
        proxy_cache_bypass \$http_upgrade;
    }      	
}

couple more questions if i may:

whats "deps"?
is there an alternative to Razzle that "just works"?

Answer 33 · 2019-11-01T14:55:36.000Z

quick note: I changed the order as I think "location ^~ /webpack/sockjs-node/" needs to go before location ^~ /webpack/

Answer 34 · 2019-11-01T14:56:45.000Z

webpack and webpack-dev-server specifically

Answer 35 · 2019-11-01T14:58:16.000Z

re root directive: saves having to repeat it on all locations for a server....

re ^~~: If the longest matching prefix location has the ^~~ modifier, then Nginx will immediately end its search and select this location to serve the request. https://www.digitalocean.com/community/tutorials/understanding-nginx-server-and-location-block-selection-algorithms

Answer 36 · 2019-11-01T15:00:27.000Z

and escaped $ in $host;

Answer 37 · 2019-11-01T15:01:49.000Z

sorry i dont understand last two comments.

Answer 38 · 2019-11-01T15:02:39.000Z

root does not do that ;)

Answer 39 · 2019-11-01T15:04:59.000Z

https://nginx.org/en/docs/http/ngx_http_core_module.html#root

Answer 40 · 2019-11-01T15:05:10.000Z

removing root and trying again....

Answer 41 · 2019-11-01T15:05:23.000Z

    proxy_set_header Host \$host;
    proxy_set_header Host $host;

Answer 42 · 2019-11-01T15:12:56.000Z

working (finally)! sincere and massive thanks for your help if ever you are visiting the UK please let me know i owe you a beer or two.

server {
    listen 80;
    server_name apps.syntapse.co.uk;
    location ^~ /razzle-dev/webpack/sockjs-node/ { 
        proxy_pass http://0.0.0.0:3001/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }     
    location ^~ /razzle-dev/webpack/ {
        proxy_pass http://0.0.0.0:3001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }      	
    location /razzle-dev/ {
        proxy_pass http://0.0.0.0:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }      	
}

Answer 43 · 2019-11-01T15:17:38.000Z

Update App.js to

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import './App.css';

const App = () => (
  <Switch>
    <Route exact path="/razzle-dev/" component={Home} />
  </Switch>
);

export default App;

Update client.js to

import App from './App';
import { BrowserRouter } from 'react-router-dom';
import React from 'react';
import { hydrate, render } from 'react-dom';

const renderMethod = !!module.hot ? render : hydrate;

renderMethod(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}

So all errors go away.

No problem, helped me get my act together an fix my docker setup. :)

If that happens I will let you know.