My code was functioning properly with if-else statements in run dev, but encountered issues when running build. The if-else statements stopped working, prompting me to explore alternative ways of conditionally rendering a page. A new approach seemed promising, however, the return statement inside is not functioning as expected. It seems to be related to a promise, as replacing it with a console.log successfully outputs text to the console. Can this issue be fixed?
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 p = new Promise((resolve, reject) => {
let address = useAddress();
if (address) {
resolve(address)
} else {
console.log('no addy')
reject()
}
})
p.then((address) => {
return (
<>
<Head>
<title>DRUMM3R</title>
<link rel="icon" href="/drum.svg" />
</Head>
<Username address={address} />
</>
);
}).catch(() => {
return (
<>
<Head>
<title>DRUMM3R</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;