pcreehan
commented
1 year ago To work around this, there are two options.
- Rather than using your selector directly on your page, wrap it in a component and then put a Suspense around it.
import Head from 'next/head' import styles from '../styles/Home.module.css' import {Suspense} from 'react'; import {useRecoilValue} from "recoil"; import {charCountState} from "../src/testState";
const Count => { const count = useRecoilValue(charCountState); return (<>{count}</>); } export default function Home() {
return ( <>
<main className={styles.main}>
<Suspense fallback='Loading...'><Count/></Suspense>
</main>
</>) }
2. Use useRecoilValueLoadable intead of useRecoilValue.
```jsx
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import {useRecoilValueLoadable} from "recoil";
import {charCountState} from "../src/testState";
export default function Home() {
const count = useRecoilValueLoadable(charCountState);
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
{count.state == 'hasValue' ? count.getValue() : null}
</main>
</>
) ;
}
Doing async on selector's get causes build to time out.
Example project: https://github.com/minakawa-daiki/recoil-build-test
If you remove the async in the following line, the build will pass without incident. https://github.com/minakawa-daiki/recoil-build-test/blob/main/src/testState.ts#L10
I believe this is a bug in Recoil.