ReferenceError: fetch is not defined after upgrading

I asked this already at Stackoverflow but will do it here again for the sake of visibility.

I recently upgraded redux-api-middleware from 2.3.0 to 3.0.1 When running my tests with jest@22.2.1 I get this ReferenceError:

    ReferenceError: fetch is not defined
    
      19 | export function sortPolicyChain (payload: Array<ChainPolicy>): SortPolicyChainAction {
      20 |   return { type: 'SORT_POLICY_CHAIN', payload }
    > 21 | }
      22 |
      23 | export type UpdatePolicyInChainAction = { type: 'UPDATE_POLICY_IN_CHAIN', policyConfig: ChainPolicy }
      24 | export function updatePolicyInChain (policyConfig: ChainPolicy): UpdatePolicyInChainAction {
    
      at Object.<anonymous> (node_modules/redux-api-middleware/lib/index.cjs.js:404:3)
      at Object.<anonymous> (app/javascript/src/Policies/actions/PolicyChain.jsx:21:27)
      at Object.<anonymous> (spec/javascripts/Policies/actions/PolicyChain.spec.jsx:3:20)

The stacktrace points to this line in PolicyChain.jsx:

    export function fetchChain (serviceId: string): RSSAAction {
      return {
        [RSAA]: {
          endpoint: `/admin/api/services/${serviceId}/proxy/policies.json`,
          method: 'GET',
          credentials: 'same-origin',
          types: [REQUEST, SUCCESS, FAILURE]
        }
      }
    }

According to the documentation here:

If provided, the fetch option must be a function that conforms to the Fetch API. Otherwise, the global fetch will be used.

But it looks like the global fetch can’t be found. Any ideas?

Relevant code at https://github.com/3scale/porta/pull/463.

[jrrudolph]

This is also a problem for isomorphic apps. What makes it especially problematic is that the code where the global fetch is assumed happens in the global scope of middleware.js, so an error is thrown as soon redux-api-middleware is included (ie, on startup). So we don’t even get a chance to pass in fetch from node-fetch or the like, as we were in 2.3.0, and our app fails out of the gate.

I propose waiting until within createMiddleware() to set the default value of fetch, assuming it wasn’t passed in through options.

[iamandrewluca]

i suggest investing in proper solution

Proper sollution I think is to drop apiMiddleware in favor of createMiddleware. And get rid of all global dependencies.

we will still need to update the babel preset eventually

I’ll take a look again when will have some time.