next.js code works in run dev but not run build

Question

The problem is with the useAddress() funciton in run dev when console logged it returns undefined undefiuned then address however in the run build/start it just returns undefined. How do I go about fixing this.

 import { useAddress } from "@thirdweb-dev/react"; import Head from 'next/head'; import Link from 'next/link'; import Username from '../components/Username'; import React from "react"; const Home = () => { let address = useAddress(); console.log(address) if (address) { return ( <> <Head> <title>home</title> <link rel="icon" href="/drum.svg" /> </Head> <Username address={address} /> </> ); } else { return ( <> <Head> <title>home</title> <link rel="icon" href="/drum.svg" /> </Head> <Link href="/"> <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a> </Link> </> ); } } export default Home;

Answer 1

Imperative code is too unpredictible in React. You should use useEffect(()=>{console.log(address)},[]) instead and it will probably work the same in both settings.

Answer 2

I hope this works:

import { useAddress } from "@thirdweb-dev/react";
import Head from 'next/head';
import Link from 'next/link';
import Username from '../components/Username';
import React, {useState, useEffect} from "react";

const Home = () => {
    const [address, setAddress] = useState(false)

    useEffect(()=> {
        setAddress(useAddress())
    }, [])

   
    
        if (address) {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />
                    </Head>
                    <Username address={address} />
                </>
            );
        } else {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />                
                    </Head>
                    <Link href="/">
                    <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a>
                    </Link>
                </>
            );
        }
}

export default Home;

next.js code works in run dev but not run build

Question

2 answers

solution1
0 2022-07-05 19:44:11

solution2
0 2022-07-05 20:50:48

next.js code works in run dev but not run build

Question

2 answers

solution1 0 2022-07-05 19:44:11

solution2 0 2022-07-05 20:50:48

solution1
0 2022-07-05 19:44:11

solution2
0 2022-07-05 20:50:48