XMLHttpRequest is not defined

[dennismamedov]

Hello, I'm using Next.JS for a project. when using unfetch I get this weird error.

import fetch from 'unfetch'
...
await fetch(`/api/...`).then(res => { ... }

This piece of code errors

ReferenceError: XMLHttpRequest is not defined
    at C:\static\st-client\node_modules\unfetch\dist\unfetch.js:1:77
    at new Promise (<anonymous>)
    at module.exports (C:\static\st-client\node_modules\unfetch\dist\unfetch.js:1:45)
    at getServerSideProps (C:\static\st-client\.next\server\pages\games.js:4214:55)
    at renderToHTML (C:\static\st-client\node_modules\next\dist\next-server\server\render.js:39:221)
    at async C:\static\st-client\node_modules\next\dist\next-server\server\next-server.js:98:97
    at async C:\static\st-client\node_modules\next\dist\next-server\server\next-server.js:91:142
    at async DevServer.renderToHTMLWithComponents (C:\static\st-client\node_modules\next\dist\next-server\server\next-server.js:123:387)
    at async DevServer.renderToHTML (C:\static\st-client\node_modules\next\dist\next-server\server\next-server.js:124:473)
    at async DevServer.renderToHTML (C:\static\st-client\node_modules\next\dist\server\next-dev-server.js:34:578)

I have installed xmlhttprequest.

Any suggestions?

[developit]

Hi there - Next.js already polyfills fetch so there's no reason to use Unfetch.

The reason this isn't working is because Next.js is executing your code in Node in addition to the browser. For that you need to use isomorphic-unfetch, not unfetch.

Feel free to reopen of I missed something.