Next.js Discord

Discord Forum

Promised data is undefined

Unanswered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Avatar
Northeast Congo LionOP
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
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_joined*1000))}</p>
  79 |                     <p>Last Joined: {strftime('%H:%M on %d/%m/%Y', new Date(user.data.info.last_joined*1000))}</p>
and I have no idea what to do, does anyone know?

32 Replies

Avatar
Northeast Congo LionOP
'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)
Avatar
Northeast Congo LionOP
anyone know?
Avatar
Northeast Congo LionOP
do you mean the code or add it to the library?
of the library?
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)
1 sec i think i got smth
oh no i did not
'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)? 
oh yes that one
this a couple times
Image
i know, i was saying "oh yes that one [the browser one]"
oh and
Image
i know
but the player function gets the uuid
Image
i also don't know why it's rendering even though it shouldn't with no username specified
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:3000Ready 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
    }
  }
}
Avatar
Northeast Congo LionOP
i fixed the rerendering issue
useEffect(() => {
        if (username !== null) {
            setLoading(true)
            sb.player(username).then(_user => {
                console.log(_user)
                setLoading(false)
                setUser(_user)
            }).catch(e => {
                console.log(e)
            })
        }
    }, [])
Avatar
Northeast Congo LionOP
could I do onsubmit too?
Avatar
Northeast Congo LionOP
alr
Avatar
Northeast Congo LionOP
(the file.coffee link is the code as of rn btw)
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
..serverside?
Avatar
Northeast Congo LionOP
how do I get the url query when getting it? since I don't have access to anything within the Page() export
Avatar
Northeast Congo LionOP
oh 🤦 nvm
Avatar
Northeast Congo LionOP
it works!!
css is broken but i can probably fix that, thank you so so much!!