Promised data is undefined

[onyx turtle]

I've tried a lot of things for this, but got no fix.
Here's my code:
[see next message] (had to remove some code bc char limit)
(sb.player returns a promise btw)
if I go http://localhost:3000/seen?username=xyz, the error is ```ts
✓ Compiled in 1608ms (487 modules)
⚠ Fast Refresh had to perform a full reload due to a runtime error.
{}
⨯ src\app\seen\page.tsx (76:34) @ last_username_pretty
⨯ TypeError: Cannot read properties of undefined (reading 'last_username_pretty')
at Page (./src/app/seen/page.tsx:126:45)
74 | <div id="output">
75 | <img src="%= https://minotar.net/avatar/${username}/125.png %" alt="avatar" />

76 | <p>{user.data.last_username_pretty}</p>
| ^
77 | <p>UUID: {user.data.uuid}</p>
78 | <p>First Seen: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.first_joined1000))}</p>
79 | <p>Last Joined: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.last_joined1000))}</p>

[random knot]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[onyx turtle]

'use client';
import { useSearchParams } from 'next/navigation';

import React, {useEffect, useState } from 'react'

import sb from 'skyblock.js'

import styles from './page.module.css'
import strftime from '../../../strftime/strftime'


export default function Page() {
    const params = useSearchParams();

    const username = params?.get('username');

    const [path, setPath] = useState('')
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        setPath(window.location.pathname)
    })

    const [user, setUser] = useState({} as any) 

    useEffect(() => {
        setLoading(true)
        sb.player(username).then(_user => {
            setLoading(false)
            setUser(_user)
            console.log(_user)
        })
        
    }, [])


    const debugLog = (user: any) => {
        console.log(user)
        return true;
    }

    if (loading) return (
        <main className={styles.main}>
            <h1>/seen</h1>
            <h3>Loading...</h3>
        </main>
    )
    
    return (
        <main className={styles.main}>
            <h1>/seen</h1>
            
            {!username &&
                <form action={path} method="GET" id="seen-form" >
                    <input 
                        type="text" 
                        name="fill" 
                        placeholder="Username" 
                        required 
                        id="username" 
                        defaultValue=""
                    />
                    <input type="submit" value="Search" id="s_sub"/>
                </form>
            }

        
            <br />
            {debugLog(user) && username &&
                <div id="o">
                    <p>{user.data.last_username_pretty}</p>
                    <p>UUID: {user.data.uuid}</p>
                    <p>First Seen: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.first_joined*1000))}</p>

                </div>
            }
        </main>
    )
}

(please ping me if anyone knows btw)

[onyx turtle]

anyone know?

[zealous pier]

if you could provide the loading part in 'skyblock.js'

it would be easier to debug

[onyx turtle]

do you mean the code or add it to the library?

[zealous pier]

send code here

[onyx turtle]

of the library?

[zealous pier]

yes

[onyx turtle]

i mean.. it's on npm
can't you just check yourself

also weirdly, it seems to resolve the promise but then it keeps rerendering it (i added a console.log to it in node modules)

[zealous pier]

ok found it

@onyx turtleWhat does it show in console?

[onyx turtle]

1 sec i think i got smth

oh no i did not

[zealous pier]

it should log the _user

[onyx turtle]

'use client';
import { useSearchParams } from 'next/navigation';

import React, {useEffect, useState } from 'react'

import sb from 'skyblock.js'

import styles from './page.module.css'
import strftime from '../../../strftime/strftime'
export default function Page() {
    const params = useSearchParams();
    const username = params?.get('username');
    const [path, setPath] = useState('')
    const [loading, setLoading] = useState(false)
    useEffect(() => {
        setPath(window.location.pathname)
    })
    const [user, setUser] = useState({} as any) 
    setLoading(true)
    if (username) {
        sb.player(username).then(_user => {
            console.log(_user)
            setLoading(false)
            setUser(_user)
        }).catch(e => {
            console.log(e)})
    }
    if (loading) return (
<main className={styles.main}>
<h1>Skyblock /seen</h1>
<h3>Loading...</h3>
</main>
    )
    return (
        <main className={styles.main}>
            <h1>Skyblock /seen</h1>
            {!username &&
                <form action={path} method="GET" id="seen-form" >
                    <input 
                        type="text" 
                        name="username" 
                        placeholder="Username" 
required 
id="username" 
defaultValue={username ?? 'Noobcrew'}
                    />
<input type="submit" value="Search" id="searchsubmit"/>
</form>
}
<br />
{&& username && 
<div id="output">
<img src="_%= `https://minotar.net/avatar/${username}/125.png` %_" alt="avatar" />
<p>{user.data.last_username_pretty}</p>
<p>UUID: {user.data.uuid}</p>
<p>First Seen: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.first_joined*1000))}</p>
<p>Last Joined: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.last_joined*1000))}</p>
<p>Last Seen: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.last_seen*1000))}</p>
</div>
}
        </main>
    )
}
``` don't mind the horrific indenting, character limit 😅

and it's just ```

dev
next dev

▲ Next.js 13.5.4

• Local: http://localhost:3000

✓ Ready in 4.5s
✓ Compiled /seen/page in 1133ms (482 modules)
null
⨯ Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
at Page (./src/app/seen/page.tsx:32:5)
Terminate batch job (Y/N)?

[zealous pier]

nothing in console?

i mean browser console

[onyx turtle]

oh yes that one

[zealous pier]

thats not

press F12 in browser

[onyx turtle]

this a couple times

[onyx turtle]

i know, i was saying "oh yes that one [the browser one]"

oh and

[zealous pier]

need any player uuid

for skyblock

basically its fetching data from here https://friends.skyblock.net/api/friends/data/{uuid}

[onyx turtle]

i know

but the player function gets the uuid

[zealous pier]

need to see how response looks

[onyx turtle]

i also don't know why it's rendering even though it shouldn't with no username specified

[zealous pier]

try replacing it with a correct username and see what happen

here:

            console.log(_user)
            setLoading(false)
            setUser(_user)
        }).catch(e => {
            console.log(e)})```

[onyx turtle]

https://friends.skyblock.net/api/friends/data/1ba2d16f-3d11-4a1f-b214-09e83906e6b5

[onyx turtle]

it outputs this, presumably thanks to the console.log i added in skyblock.js

> dev
> next dev

  ▲ Next.js 13.5.4
  - Local:        http://localhost:3000

 ✓ Ready in 4.7s
 ✓ Compiled /seen/page in 1236ms (482 modules)
noobcrew
 ⨯ src\app\seen\page.tsx (73:34) @ last_username_pretty
 ⨯ TypeError: Cannot read properties of undefined (reading 'last_username_pretty')
    at Page (./src/app/seen/page.tsx:128:45)
  71 |                 <div id="output">
  72 |                     <img src="_%= `https://minotar.net/avatar/${username}/125.png` %_" alt="avatar" />
> 73 |                     <p>{user.data.last_username_pretty}</p>
     |                                  ^
  74 |                     <p>UUID: {user.data.uuid}</p>
  75 |                     <p>First Seen: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.first_joined*1000))}</p>
  76 |                     <p>Last Joined: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.last_joined*1000))}</p>
{
  online: false,
  forums_user_id: 1,
  data: {
    uuid: '1ba2d16f-3d11-4a1f-b214-09e83906e6b5',
    last_username: 'noobcrew',
    last_username_pretty: 'Noobcrew',
    info: {
      last_joined: 1696581846,
      first_joined: 1550183176,
      last_seen: 1696583158
    }
  }
}

[onyx turtle]

i fixed the rerendering issue ```ts
useEffect(() => {
if (username !== null) {
setLoading(true)
sb.player(username).then(_user => {
console.log(_user)
setLoading(false)
setUser(_user)
}).catch(e => {
console.log(e)
})
}
}, [])

[zealous pier]

ok make the data loading in a seperate function
then add in the form tag onClick={loadPlayer}

[onyx turtle]

could I do onsubmit too?

[zealous pier]

yes

[onyx turtle]

alr

[onyx turtle]

it's doing it clientside again https://file.coffee/u/wiUoW-u406_Mq_UKUCRzm.txt

(the file.coffee link is the code as of rn btw)

[zealous pier]

the library is requesting mojang api, but mojang doesnt allow it

[onyx turtle]

the point is it shouldn't be doing it clientside tho?

like i know the code you said forces it to be clientside but still

[zealous pier]

then where?

[onyx turtle]

..serverside?

[zealous pier]

you need to move it to server side

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

[onyx turtle]

how do I get the url query when getting it? since I don't have access to anything within the Page() export

oh 🤦 nvm