ReferenceError: fetch is not defined after upgrading

[josemigallas]

ReferenceError: fetch is not defined after upgrading

[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.

[Jedidiah]

For anyone else wanting to get this working with Gatsby, I got rid of the error by adding isomorphic-fetch as a webpack plugin in gatsby-node.js.

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new webpack.ProvidePlugin({
        fetch: path.resolve(path.join(__dirname, "node_modules/isomorphic-fetch/fetch-npm-node"))
      })
    ]
  });
};

[essensx]

Hmm, in my opinion this seems a bit harsh, considering that most of the consumers of the library probably use polyfills to resolve such issues.

If implementing globalThis proposal is a bit of a hassle, I think we could actually implement a simpler solution - to evaluate user-defined fetch implementation first (if set), then try to use global fetch 🤔

In this case, the library should be usable in all use cases.

Any thoughts?

[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.

[darthrellimnad]

I don't believe node implements a global fetch method like browsers do, so you may need to add a standards compliant version to jest's runtime environment to match behavior.

Not totally sure why an upgrade to v3 would cause this though, since the internal isomorphic-fetch dependency was removed in v2 I believe. Usually, this can be handled with a setupScripts.js file (when using react-scripts), or a setupFiles config when using Jest directly.

Here, you can create global.fetch and window.fetch value for unit and/or integration tests using something like isomorphic-fetch or a mock implementation like jest-fetch-mock.

Additionally, with redux-api-middleware, you can often simply stub the dispatch method of the store used by a unit test, since many tests may only need to verify that dispatched RSAAs are well-formed and match an expected RSAA object.

More info on setting up Jest with a fetch implementation can be found in the following issue:
facebook/create-react-app#967

Hope this helps :)

[Jedidiah]

Hitting this same problem trying to use this in a Gatsby app. The build fails as fetch is undefined.

[nason]

@darthrellimnad is right about fetch

Any suggestions as to how this could be handled better?

[essensx]

I have the same issue with nextjs, as node does not have fetch. Because of defaults trying to access fetch, you can't set your own fetch implementation, which renders the functionality unusable in node env. I think the easier solution would be to just check if fetch is defined, before trying to set it into the object.

Edit: created a PR to address the issue.

[iamandrewluca]

Use createMiddleware with your own fetch compilant function
https://github.com/agraboso/redux-api-middleware#createmiddlewareoptions

[essensx]

It will not work, as the build fails due to undefined fetch.

https://i.imgur.com/iIq2XeI.png

[iamandrewluca]

@nason I would suggest to make a breaking change and remove apiMiddleware and let users replace it with

const apiMiddleware = createMiddleware({ fetch: /* any fetch compilant library */ })

This way we get rid of any global dependencies. And less issues.

[iamandrewluca]

Long story short. I have a fix. But I don't know how exactly it will behave. I think it will behave like in v2
In v2 if fetch was not provided is was silently catch by try block and dispatched as an failure action
in v3 it was catch by 'use strict'; mode and was thrown very early
And I'm still for that to deprecate apiMiddleware in favor of createMiddleware.

#251

The explanation
In v2 global fetch was used at the moment when action was called. At that moment a global fetch was already provided.
In v3 we moved that global fetch as a default option. At that moment global fetch was not provided yet, and 'use strict'; complained that fetch does not exist.

Actually in v2 'use strict'; also complained but the error was caught silently and dispatched as failure action

[iamandrewluca]

Released in https://github.com/agraboso/redux-api-middleware/releases/tag/v3.2.1

[essensx]

Awesome! Though i suggest investing in proper solution, as we will still need to update the babel preset eventually.. Sorry for not contributing, did not have the time