Doesn't support SSR

[KristerV]

I'm using next.js and getting errors that are probably to do with it rendering on server side. If I've installed isomorphic-unfetch then I don't get an error about fetch being missing, but even if I have request installed I get the following error.

Request must be a function. Instead received a undefined.
Invariant Violation: Request must be a function. Instead received a undefined.
    at invariant (/var/lib/leia-web/node_modules/invariant/invariant.js:40:15)
    at typecheck (/var/lib/leia-web/node_modules/react-refetch/lib/utils/checkTypes.js:20:27)
    at Object.Request (/var/lib/leia-web/node_modules/react-refetch/lib/utils/checkTypes.js:59:5)
    at /var/lib/leia-web/node_modules/react-refetch/lib/utils/checkTypes.js:78:18
    at Array.forEach (<anonymous>)
    at checkTypes (/var/lib/leia-web/node_modules/react-refetch/lib/utils/checkTypes.js:76:24)
    at connect (/var/lib/leia-web/node_modules/react-refetch/lib/components/connect.js:161:28)
    at connectImpl (/var/lib/leia-web/node_modules/react-refetch/lib/components/connect.js:83:12)
    at Object../pages/stepping-evisit.js (pages/stepping-evisit.js:58:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 2e6b861fed1e4312e733:21:0)
    at Object.3 (/var/lib/leia-web/.next/server/bundles/pages/stepping-evisit.js:454:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 2e6b861fed1e4312e733:21:0)
    at /var/lib/leia-web/.next/server/bundles/pages/stepping-evisit.js:70:18
    at Object.<anonymous> (/var/lib/leia-web/.next/server/bundles/pages/stepping-evisit.js:73:10)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)

I looked at the source of this package and it seems that global.Request just isn't populated even though request is installed. Either this needs a fix or some documentation. Either way I can't figure out a way to use it.

[mattrothenberg]

FWIW, I'm using this on a Next.js project, and was able to circumvent this error by including import 'isomorphic-fetch' in all of my connected components.

[KristerV]

hmm, you didn't even get the Request error? Interesting. I'll try this again at one point. For now I was forced to move back to simply using await fetch().

@mattrothenberg Could you post a gist of your component? I do wonder how you've set everything up in terms of component functions and stuff. An example in the next.js repo under examples/ would be extra king, but too much work for me to ask you :D

[mattrothenberg]

Nope, no more request errors. As long as I include the following (in any connected component), I seem to be OK.

// UserList.jsx

import 'isomorphic-fetch'
import { connect } from 'react-refetch'

const UserList = () => <div>...</div>

export default connect(props => ({
  usersFetch: `/api/users/`
}))(UserList)

[KristerV]

Okay. Since my import was import fetch from 'isomorphic-unfect' I'll close the issue for now and open it again if following your example doesn't work for me. thanks! :)

[tkvw]

I actually came across the same issue today. You need Request and fetch on the global state for react-refetch to work on SSR. I don't use react-refetch on the server, because I need user credentials to make authenticated requests and I'm not going to implement a proxy for this. So my solution is very simple, I created a blocking ssr hoc:

// connect.js
import { connect } from "react-refetch";
const BlockSsr = Component => () => null;
export default (...args) => (process.browser ? connect(...args) : BlockSsr);