Next.js Discord

Discord Forum

Browser forward navigation button throws a "use client" error.

Answered
Exotic Shorthair posted this in #help-forum
Open in Discord
Exotic ShorthairOP
The problem is specifically in the "src\app(site)\products[product_Id]\page.tsx" route.
here is the link to the repo: https://github.com/AkeaNine/NeonAge-Next.js
also here is the error:

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
Answered by DirtyCajunRice | AppDir
add a loading.tsx file
View full answer

58 Replies

Exotic ShorthairOP
@DirtyCajunRice | AppDir
DirtyCajunRice | AppDir
what did i do
Exotic ShorthairOP
lol
DirtyCajunRice | AppDir
oh righ right
so. couple things
1. dont do React.FC<PageProps>
instead do 
const page = async ({ params, searchParams }: PageProps) => {
2. always uppercase your component first letter
so Page not page
Exotic ShorthairOP
noted
DirtyCajunRice | AppDir
outside of that, i am not seeing anything crazy
oo
bump your typescript version
wait thats fine i thought that was your types/node
ah fuck it lemme just pull it
Exotic ShorthairOP
the MainProductSection.tsx file inside the [product_id]/component has a use client
man it's all confusing. this is my first next.js app
DirtyCajunRice | AppDir
sokay sokay
ok gimme a url
oh i cant even run this
because of the sanity config
Exotic ShorthairOP
wait
xk3ins0n
use this inside the projectID
DirtyCajunRice | AppDir
ok
so this is deep in there
so localhost:3000/products/(whatamiputtinghere)
im not getting any async errors
Exotic ShorthairOP
yes this is it
go back to http://localhost:3000
with the browser navigation keys
DirtyCajunRice | AppDir
ok
Exotic ShorthairOP
then click the forward navigation button
DirtyCajunRice | AppDir
ayoooo
ok
testing some stuff
gimme like 5 min
Exotic ShorthairOP
you got it
DirtyCajunRice | AppDir
nvm
😄
already figured it out
DirtyCajunRice | AppDir
add a loading.tsx file
Answer
DirtyCajunRice | AppDir
you dont have an error boundary for your async route segment
the error you are getting is really bad for the actual problem
its just that you need to have that loading.tsx
const Loading = () => {
  return "Loading..."
}

export default Loading;
Exotic ShorthairOP
that worked!!!
DirtyCajunRice | AppDir
🙂
@DirtyCajunRice | AppDir you dont have an error boundary for your async route segment
Exotic ShorthairOP
wait what is the async route segment here?
all pages / layouts are route segments
so its just a general term
when you make a page async (which is totally fine and good) you should always have a loading.tsx paired with it to handle any oopsies or slow network etc
ideally always an error.tsx too but thats a different convo haha
Exotic ShorthairOP
i see
okay thanks a lot man
DirtyCajunRice | AppDir
no problem!