Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
next build times out with recoil.js async selectors using suspense
See original GitHub issueVerify canary release
- I verified that the issue exists in Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.15.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.1.7-canary.27
react: 18.1.0
react-dom: 18.1.0
UPDATE (7/8/22): Confirmed issue still exists with 12.2.0
What browser are you using? (if relevant)
n/a
How are you deploying your application? (if relevant)
n/a
Describe the Bug
running next build times out with
warn - Restarted static page generation for / because it took more than 60 seconds
warn - See more info here https://nextjs.org/docs/messages/static-page-generation-timeout
in a very simple application when using recoil with an async selector and <React.Suspense> following an example very similar to this: https://recoiljs.org/docs/guides/asynchronous-data-queries#asynchronous-example .
Here’s my example with console showing the build failure (it tries 3 times then errors out).
Switching to using the Loadable strategy works, but is less ideal:
next dev runs fine and the application ‘works’ using either method, it’s only when next is generating the static pages that it has a problem.
I am assuming this is not a Recoil bug exclusively because I assume they would have seen a problem building in a different framework like react-scripts or whatever.
Expected Behavior
next build should be able to generate static pages using recoil async selectors surrounded in React.Suspense.
To Reproduce
npx create-next-app@latest --typescript
npm install recoil@latest
modify _app.tsx to
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { RecoilRoot } from "recoil";
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
);
}
export default MyApp;
Modify index.tsx to
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { selector, useRecoilValue } from "recoil";
import React from "react";
interface IResponse {
success: number;
}
const myAsyncSelector = selector({
key: "try-this",
get: async () => {
let apiRes = await fetch(
"https://mocki.io/v1/625d1778-9b02-4f65-8fa5-31e91191c18f"
);
return (await apiRes.json()) as IResponse;
},
});
const MyComponentUsingAsyncSelector = () => {
const apiresponse = useRecoilValue(myAsyncSelector);
return <div>Success Value = {apiresponse.success}</div>;
};
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<React.Suspense fallback={<div>Loading...</div>}>
<MyComponentUsingAsyncSelector />
</React.Suspense>
</main>
</div>
);
};
export default Home;
npm run build
observe the warnings and eventual failure of the build while generating static pages.
Issue Analytics
- State:
- Created a year ago
- Reactions:8
- Comments:5
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I don’t think the problem is that it’s not available in nextjs yet. As I linked in my original post, the async example in Recoil’s own documentation says that it does work with Suspense:
Yes, everything seems to work ok in
next devas far as I can tell. The problem occurs during static page generation innext build.+1