[NEXT-428] AppDir: Static Page generation and build process fails for Dynamic Routes with Fetch (in Version >= 13.1.2) #44998
Comments
|
Add |
|
Might be fixed now #45006 |
jankaifer
added
the
please verify canary
|
Please verify that your issue can be recreated with Why was this issue marked with the
|
|
Verified, the issue still exists in 13.1.3-canary.5 |
|
I have the exact same issue. The dockerfile is basically doing: When I try to start the container afterwards it says within the log: {"level":"ERROR", "msg":"Error: Could not find a production build in the '/usr/src/app/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id Maybe it is important to says that I'm using node:14-alpine within the docker container. I cannot switch to > node 14 for now. The documentation says nextja supports node 14 so it should work I think. The issue starts with next 13.1.2 and is still there with the latest canary. |
jankaifer
added
type: needs investigation
and removed
please verify canary
github-actions
bot
added
the
linear: next
|
TL;DR:
I ran into this issue. Specifically, it began to happen between v13.1.1 and v13.1.2. The error in the console was a little convoluted, but the pertinent line is this:
Between the aforementioned versions, the number of static pages that The root cause appears to be that starting with v13.1.2, the build process attempts to generate pages for those routes where it hadn't done before. Since The suggested fix of adding Since it only happened on that one route and not my other dynamic routes (which also don't have That said, even in the latest non-canary version (v13.1.5), I still get the same issue without |
|
My problem is probably the same, although the error message is different: In version >=13.1.2, build process returns errors when generating static pages as it tries to generate a static page for dynamic routes, such as All dynamic routes are then marked as "static" in route overview and when deployed to production, all return 404. The only route that works is actually I confirmed that the problem persist in v13.1.6-canary.1 Route in <13.1.1 as reported after the build: Route in >=13.1.2 as reported after the build: Build in >=13.1.2 and 9 others for other dynamic routes... |
@lukasnevosad my guess is that somewhere in your page component, you're throwing an uncaught error for the invalid From the error message, it looks like somewhere you're validating the If you don't want to leverage the static page generation for that route and you're not using Specifically, if you manually hit |
|
@abstractvector I am not primarily javascript developer, so I might be wrong. But I don't think there's an uncatched error. The code runs with no console errors when run with Here's the code for head.tsx: export default async function Head(props: any) {
try {
const linkId = props.params.linkId;
if (!validateId(linkId)) throw Error(`Invalid linkId "${linkId}"`);
const linkData = await getLinkData(linkId);
return (
<LayoutHead title={linkData.title} description={linkData.description}>
<meta property="og:image" content={linkData.imageUrl} />
</LayoutHead>
);
} catch (error) {
return (
<LayoutHead title="Invalid link">
<meta name="robots" content="noindex, follow" />
</LayoutHead>
);
// Ignore error
}
}and page.tsx: export default async function Page(props: any) {
try {
const linkId = props.params.linkId;
if (!validateId(linkId)) throw Error(`Invalid linkId "${linkId}"`);
const linkData = await getLinkData(linkId);
return (
<LayoutBody>
<LinkContent linkData={linkData} />
<DownloadApp />
{/* @ts-expect-error Server Component */}
<CollectionsTeaserSection />
</LayoutBody>
);
} catch (error) {
console.log(error);
notFound();
}
}I simplified the code a bit to keep it readable. The only thing that struck me as a potential problem as I am writing this is the line: {/* @ts-expect-error Server Component */}
<CollectionsTeaserSection />which is a server async component that causes Typescript type checking issues. But as I said, it works perfectly fine in development with the latest |
|
That certainly looks like you're catching the error! If you run |
I didn't figure out how to make |
jankaifer
added
linear: next
jankaifer
changed the title
|
It's fixed after I added |
|
@JJ can you verify this issue? |
I could definitely give it a try, but it's going to be faster trying and find the right person-whose-nick-starts-with-JJ-or-maybe-just-J 🤣 |
|
cc @ijjk |
|
This appears to be a duplicate of #45515 basically if We are investigating this behavior more although this is the current expected behavior. |
|
Imo, having to use If we need to have this for some other reason, may be it would be worth mentioning it in https://beta.nextjs.org/docs/routing/defining-routes#dynamic-segments |
|
@lukasnevosad |
|
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true), Data fetching (gS(S)P, getInitialProps)
Link to the code that reproduces this issue
https://codesandbox.io/s/build-with-dynamic-routes-fails-in-next-13-1-2-ei0ms2
To Reproduce
Open a new terminal in the sandbox and run
npm run buildDescribe the Bug
To generate the static pages, next fetches with [dynamic] as the query param. So instead of
https://swapi.dev/api/people/1/?format=jsonit fetcheshttps://swapi.dev/api/people/[dynamic]/?format=json.In my production environment, that query can't be handled by the API, no json is returned, or the JSON doesn't match the promise (as you would expect), leading the build process to fails. The api in the code sandbox should return
{"detail":"Not found"}for the incorrect call, but it also says:Error: Failed to fetch data.This worked as intended in 13.1.1 and below.
Even if you catch these errors and the build process is successful, that should leave you with a static page without your desired data.
This will leave you with the following trace:
Expected Behavior
According to the docs, dynamic routes will cause Next.js to render the whole route dynamically, at request time. Not sure if next just always tries to generatestatic pages as well, but this should not make the build process fail.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
NEXT-428
The text was updated successfully, but these errors were encountered: