problem with use Client

Unanswered

Challangerson posted this in #help-forum

2023-11-07T11:03:02.000Z

'use client'

import React from 'react'
import style from '../../css/user.module.scss'
import { useState, useEffect } from 'react'
import  UserSide  from "../../../../components/UserSide.js"


export async function GET({params}) {

  const [user, setUser] = useState([]);

  useEffect(()=>{
    fetch("../../api/user/" + params.user)
    .then((res) => res.json())
    .then((user) => {
      setUser(user);
    })

  },[])

  

  return(
    <>
      <div>
        XD
      </div>
    </>
  )
}

86 Replies

ChallangersonOP

2023-11-07T11:03:25.000Z

 â¨¯ Error: Attempted to call GET() from the server but GET is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

@Challangerson js 'use client' import React from 'react' import style from '../../css/user.module.scss' import { useState, useEffect } from 'react' import UserSide from "../../../../components/UserSide.js" export async function GET({params}) { const [user, setUser] = useState([]); useEffect(()=>{ fetch("../../api/user/" + params.user) .then((res) => res.json()) .then((user) => { setUser(user); }) },[]) return( <> <div> XD </div> </> ) }

ChallangersonOP

2023-11-07T11:04:25.000Z

Source of this file SRC/app/user/[user]/route.js

riský

2023-11-07T11:04:28.000Z

why are you trying to make a route handler with client component?

you should just remove 'use client'?

ChallangersonOP

2023-11-07T11:05:03.000Z

Then its send useEffect needs use client

riský

2023-11-07T11:05:17.000Z

wait i think you missunderstood route handler

this should just be a page.tsx

ChallangersonOP

2023-11-07T11:05:44.000Z

So error said u have a bad file

riský

2023-11-07T11:05:56.000Z

route handers are not react

ChallangersonOP

2023-11-07T11:05:58.000Z

Or not found route.js

riský

2023-11-07T11:06:15.000Z

page files are react and can have useEffect

@Challangerson Or not found route.js

riský

2023-11-07T11:06:29.000Z

yes that is react

ChallangersonOP

2023-11-07T11:06:47.000Z

If i back too home i will change it and said if i still has errror

riský

2023-11-07T11:07:12.000Z

im confused... why aren't you doing this code in a page.tsx?

ChallangersonOP

2023-11-07T11:07:37.000Z

Cuz i builded it in src/app

riský

2023-11-07T11:07:38.000Z

route handlers are for returning arbitrary data and not jsx

@Challangerson Cuz i builded it in src/app

riský

2023-11-07T11:07:50.000Z

yeah, you use page.tsx in app dir

ChallangersonOP

2023-11-07T11:08:10.000Z

And not using jsx cuz i hate jsx and always typed any

And all said if i always typed any i need to change it to js

riský

2023-11-07T11:08:37.000Z

this is jsx

useEffect is react

neither is what route handlers are expected to do

ChallangersonOP

2023-11-07T11:09:14.000Z

U mean jsx

I think u talk about ts

My bad sorry

riský

2023-11-07T11:09:58.000Z

yeah i should have been more specific that i meant the fancy react syntax for making components

fuma

2023-11-07T11:11:39.000Z

What is your purpose of the above code? Can you elaborate more about your question? (e.g. what are you trying to do?)

ChallangersonOP

2023-11-07T11:12:13.000Z

Getting user from database then print info about him

From Minecraft guilds

fuma

2023-11-07T11:12:44.000Z

print info about him

So what do you expect? A html page? or just an ordinary Rest API response?

Cuvierâ€™s Dwarf Caiman

2023-11-07T11:13:15.000Z

Here u should rename your file from route.js to page.js and in ur code everything is good so uve just check your api

fuma

2023-11-07T11:13:30.000Z

for a html page, use [page.tsx](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)
Please check the docs before asking

read through the whole section for routing

riský

2023-11-07T11:14:01.000Z

also fix your fetch req to not have ../../ i believe

@riský also fix your fetch req to not have `../../` i believe

Cuvierâ€™s Dwarf Caiman

2023-11-07T11:15:05.000Z

Exactly, if he encounter an error it's mean from api call

Ash-throated Flycatcher

2023-11-07T16:57:18.000Z

Your code is all wrong, a client component cannot be async, and if you want to use a server component, it cannot have state and useEffect.

@fuma for a html page, use [`page.tsx`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) Please check the docs before asking

ChallangersonOP

2023-11-09T07:35:43.000Z

The default export is not a React Component in page: "/user/[user]"

@riský

changed name to page.js

and still that same problem

AbortError: The user aborted a request.

riský

2023-11-09T07:37:37.000Z

can you show your latest code for the file

ChallangersonOP

2023-11-09T07:37:53.000Z

'use client'

import React from 'react'
import style from '../../css/user.module.scss'
import { useState, useEffect } from 'react'
import  UserSide  from "../../../../components/UserSide.js"


export function GET({params}) {

  const [user, setUser] = useState([]);

  useEffect(()=>{
    fetch("/api/user/" + params.user)
    .then((res) => res.json())
    .then((user) => {
      setUser(user);
    })

  },[])

  

  return(
    <>
      <div>
        XD
      </div>
    </>
  )
}

riský

2023-11-09T07:38:08.000Z

you need default function here

ChallangersonOP

2023-11-09T07:38:10.000Z

folder src/app/user/[user]

what is the defautlt ?

ahh ok

riský

2023-11-09T07:38:36.000Z

export default function PageThingy

ChallangersonOP

2023-11-09T07:39:03.000Z

 â¨¯ Detected default export in 'C:\Users\MazurKacper\Desktop\SalkMac\website\src\app\api\user\[user]\route.js'. Export a named export for each HTTP method instead.

but what is that error?

riský

2023-11-09T07:39:16.000Z

you are using route.js still

not page that you claimed

ChallangersonOP

2023-11-09T07:39:39.000Z

no i mnot

thats the only what i have

riský

2023-11-09T07:40:05.000Z

uhh hmm

ChallangersonOP

2023-11-09T07:40:08.000Z

or in sql request cant ask for route?

riský

2023-11-09T07:40:14.000Z

try to delete .next folder

ChallangersonOP

2023-11-09T07:40:22.000Z

riský

2023-11-09T07:40:49.000Z

ohh yeah this was for the api

but do you want an API (returnes text or json) or a page (react html)?

ChallangersonOP

2023-11-09T07:41:26.000Z

html

jsx*

naah

api needs to return json

@Challangerson js 'use client' import React from 'react' import style from '../../css/user.module.scss' import { useState, useEffect } from 'react' import UserSide from "../../../../components/UserSide.js" export function GET({params}) { const [user, setUser] = useState([]); useEffect(()=>{ fetch("/api/user/" + params.user) .then((res) => res.json()) .then((user) => { setUser(user); }) },[]) return( <> <div> XD </div> </> ) }

riský

2023-11-09T07:41:55.000Z

so this is your page.js

@Challangerson Click to see attachment

ChallangersonOP

2023-11-09T07:41:57.000Z

this folder return jsx

yes thats not an api

@Challangerson Click to see attachment

ChallangersonOP

2023-11-09T07:42:15.000Z

in that folder

riský

2023-11-09T07:42:17.000Z

make that file default export

and have the api as

ChallangersonOP

2023-11-09T07:42:31.000Z

'use client'

import React from 'react'
import style from '../../css/user.module.scss'
import { useState, useEffect } from 'react'
import  UserSide  from "../../../../components/UserSide.js"


export function page({params}) {

  const [user, setUser] = useState([]);

  useEffect(()=>{
    fetch("/api/user/" + params.user)
    .then((res) => res.json())
    .then((user) => {
      setUser(user);
    })

  },[])

  

  return(
    <>
      <div>
        XD
      </div>
    </>
  )
}

export default page