next js react app fetch not defined error

Question

I am trying to clone the following next.js react app and run it on localhost:3000

https://github.com/elee-ittdublin/lab6-nextjs

when I open localhost:3000 I get the following error

Unhandled Rejection (ReferenceError): fetch is not defined Function._callee$ ./pages/index.js:22

20 | // see https://nextjs.org/learn/basics/fetching-data-for-pages
>22 | Index.getInitialProps = async function() {
24 |   const url = 'https://api.tvmaze.com/search/shows?q=batman';

I have tried to research what I am doing wrong but I still can not fix my problem. Can anyone see where I am going wrong?

Cheers

what about that answer : stackoverflow.com/questions/36484156/es6-fetch-is-undefined — Kevin Amiranoff
– Kevin Amiranoff, Commented Nov 25, 2018 at 14:57
thanks for the reply buddy. errors are gone although when i click on the batman links i get '404 This page could not be found.' so the fetch is not working, any idea why? — Craig P H
– Craig P H, Commented Nov 25, 2018 at 15:28
Fetch is working. The issue you have, when you click on the batman links you are redirected to a page on your app that doesn't exist. That line is wrong <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}> — Kevin Amiranoff
– Kevin Amiranoff, Commented Nov 25, 2018 at 15:43

gdfgdfg · Accepted Answer · 2020-05-15 01:09:01Z

2

If you go to the examples here examples and search for fetch, you will see what they are using. In the examples is node-fetch - node-fetch

answered May 15, 2020 at 1:09

gdfgdfg

3,5868 gold badges46 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eneski · Accepted Answer · 2021-01-13 20:25:07Z

1

fetch is a predefined method in the browser but your function works in server side, so it does not work.

There is an npm package that basically combines browser's fetch and node-fetch together, it is named isomorphic-unfetch, you can install it via the command npm install isomorphic-unfetch.

After that use unfetch method anywhere u want to use fetch method.

PS: In the newer versions of Next.JS ( 10.0.0 and above ) you should not see this problem.

answered Jan 13, 2021 at 20:25

eneski

1,70522 silver badges42 bronze badges

Comments

Jayanta Baishya · Accepted Answer · 2018-11-25 14:44:24Z

0

May be the package is not installed. Try installing https://www.npmjs.com/package/isomorphic-unfetch

answered Nov 25, 2018 at 14:44

Jayanta Baishya

971 silver badge12 bronze badges

2 Comments

Craig P H Over a year ago

thanks for the reply; i tried installing the package. i'm still getting the same errors

r2evans Over a year ago

... and this is more like a comment than an answer (especially since it does not seem to address OP's issue).

Collectives™ on Stack Overflow

next js react app fetch not defined error

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related