I have a react application using auth0-react and react-router-dom. I use getAccessTokenSilently() from useAuth0() to add a token to API request headers. I also use user from useAuth0() to display the user name on the top banner.
All of this works correctly when running the application locally with the “vite” command. However, when building the application with “tsc && vite build” and then running it locally from the dist folder using “vite preview”, as well as when this is done to deploy the application to the cloud, the following error is produced when calling getAccessTokenSilently(): “You forgot to wrap your component in ”. This call is nested many layers deep, however the username derived from useAuth0 is still displayed correctly, showing that my Auth0Provider is still working.
I have tried different approaches to requesting the token, like doing different parts in useEffect and providing different dependencies, and attempting to wrap the components making the request directly in another instance of Auth0Provider. Some of these methods still work in development but none work in the built version. Additionally, I have tried getting user from useAuth0() at the same time but that returns undefined when/where I have this issue, even though the banner still shows the username.
This builds to a single .js and .css file, and inspecting the react components in chrome react devtools it looks like everything is inside of the Auth0Provider. Any help resolving this would be appreciated.
Here’s a couple of threads that provide additional context on the error you’re seeing. If you don’t find an answer here, can you please share some code snippets of your implementation. Don’t include any sensitive data.
Thanks for the reply. I have reviewed just about every mention of “you forgot to wrap your component” I can find on Google. Again, this does work using “vite dev” to run the application directly from the unbuilt application in src/, and it’s only in the built application in dist/ with “vite preview” that I have the issue. I’ll see if I can reproduce the issue in a more bare-bones example of it, but this seems to be related to react-router-dom.
We are using react-router-dom v6 with createBrowserRouter() and <RouterProvider>, like this: