Errors while building app- Nextjs/Javascript

userYDKl1 0
Viewed 33

I got the below errors while building my application. Not sure why this is happening. I wrote a fetch in a sperate function and my trying to call my fetch function (that is styled as a custom react hook) in my getStaticSite props but it is not letting me. How can I bypass this problem? I don't think I'd have this problem if I just wrote the fetch directly into the getStaticSite props, but for organizational reasons I prefer to write my fetches in functions.

The Error I get:

./pages/SSG/paristimeisg.js 6:22 Error: React Hook "useFetchParisTimeISG" is called in function "getStaticProps" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

useFetchParisTimeISG code below

import React from "react";

export default async function useFetchParisTimeISG() {
  const response = await fetch(
    `https://timeapi.io/api/Time/current/zone?timeZone=Europe/Paris`
  );
  const currenttimeinparis = await response.json();

  return currenttimeinparis;
}

paristimeisg page code below.

import useFetchParisTimeISG from "../../hooks/SSR/ISR/useFetchParisTimeISG";

export async function getStaticProps() {
  let mytime = await useFetchParisTimeISG();

  return { props: { mytime }, revalidate: 60 };
}

export default function paristimeisg({ mytime }) {
  console.log("This is my time", mytime);
  return (
    <div>
      Hello
      <h2>{mytime.milliSeconds}</h2>
    </div>
  );
}

Extra question

I get the same error listed as the above for this page, despite not having any react hooks inside non react components(unless I am missing something?).

Error I get:

./pages/SSG/timeforISG.js 5:16 Error: React Hook "useFetchParisTimeISG" is called in function "timeforISG" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

Page code

import React from "react";
import useFetchParisTimeISG from "../../hooks/SSR/ISR/useFetchParisTimeISG";

export default function timeforISG() {
  let mytime = useFetchParisTimeISG();
  return <div>{mytime}</div>;
}

useFetchParisTimeISG code is the same as above (top of page).

next.js reactjs javascript build
2 Answers

Your issue is a simple one - you are incorrectly trying to use a React Hook in a non-React component (getStaticProps, which is a NextJS function).

The solution is simple:

  • Create a plain old JavaScript file that is not named like a Hook (e.g. parisTimeFetcher.js)
  • Paste in your original code (with a function name change to avoid a possible React error over the "use" syntax, and remove the React import as it is just plain JavaScript):
export default async function fetchParisTimeISG() {
  const response = await fetch(
    `https://timeapi.io/api/Time/current/zone?timeZone=Europe/Paris`
  );
  const currenttimeinparis = await response.json();

  return currenttimeinparis;
}
  • Now, import the function into your Next page, and use this function inside getStaticProps:
import { fetchParisTimeISG } from "../../fetchers/parisTimeFetcher";

export async function getStaticProps() {
  let mytime = await fetchParisTimeISG();

  return { props: { mytime }, revalidate: 60 };
}
mojago0

Giving your naming that is prefixed with use, React assumes that you're trying to call a hook with its manageable state outside of a component (which it will not work) thats why it throws this error. Hooks shouldn't be called inside a regular functions as mentionned in react official Doc

You should change your naming and remove the use Prefix (You dont have to remove it from the the file name but its recommended)

Zakaria Benali0
Related