Invalid Hook in reactJS Using Auth0 - reactjs

Question

I have an app.js with the following const function:
const serverUrl = process.env.REACT_APP_SERVER_URL;
const { getAccessTokenSilently } = useAuth0();
const callEndpoint = async (props) => {
const {endpoint} = props;
const token = await getAccessTokenSilently();
try {
const token = await getAccessTokenSilently();
console.log('endpoint is:', `${serverUrl}/${props.endpoint}`);
const response = await fetch(
`${serverUrl}/${props.endpoint}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
const responseData = await response.json();
console.log(responseData.message);
} catch (error) {
console.log(error.message);
}
};
Further down in the render:
<Button variant="outline-primary" onClick = { (e) => {callEndpoint({endpoint:"get_timestamp_public"})}} >Fetch Public Data</Button>
It works fine.
However, when I try to move my endpoint into a new js file called 'api_funcs.js':
import React, { useEffect, useState } from 'react';
import { useAuth0 } from '#auth0/auth0-react';
const UseAPI = (props) => {
const {endpoint} = props;
const serverUrl = process.env.REACT_APP_SERVER_URL;
console.log("I am in here");
const { getAccessTokenSilently } = useAuth0();
const callEndpoint = async () => {
const token = await getAccessTokenSilently();
try {
// const token = await getAccessTokenSilently();
const response = await fetch(
`${serverUrl}/{props.endpoint}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
const responseData = await response.json();
//setMessage(responseData.message);
console.log(responseData.message);
} catch (error) {
//setMessage(error.message);
console.log(error.message);
}
};
}
export default UseAPI;
The const { getAccessTokenSilently } = useAuth0(); throws me an error of:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I don't understand -- isn't my UseAPI a function component? What am I missing?

Answer 1

As you are not breaking the Rules of Hooks.
There might be two common reasons because of which you might be seeing this error:
You might have mismatching versions of React and React DOM.
You might be using a version of react-dom (< 16.8.0) that doesn’t yet support Hooks. You can run
> npm ls react-dom
in your application folder to check which version you’re using.
You might have more than one copy of React in the same app.
In order for Hooks to work, the react import from your application code needs to resolve to the same module as the react import from inside the react-dom package.
If these react imports resolve to two different exports objects, you will see this warning. This may happen if you accidentally end up with two copies of the react package.
If you use Node for package management, you can run this check-in your project folder:
npm ls react
If you see more than one React, you’ll need to figure out why this happens and fix your dependency tree. For example, maybe a library you’re using incorrectly specifies react as a dependency (rather than a peer dependency). Until that library is fixed, Yarn resolutions is one possible workaround.
You can also try to debug this problem by adding some logs and restarting your development server:
// Add this in node_modules/react-dom/index.js window.React1 =
require('react');
// Add this in your component file require('react-dom'); window.React2
= require('react'); console.log(window.React1 === window.React2);
If it prints false then you might have two Reacts and need to figure out why that happened. This issue includes some common reasons encountered by the community.
This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.
Thus, running the command
npm link <path_to_local_library>/node_modules/react
might solve your issue.
Note
In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if require('react') resolves differently between the component and the react-dom copy it was rendered with.
Source React Doc