dynamic = "error" violations should be shown in error overlay (#45893

dynamic = "error" should throw in dev mode, currently, it just gets
ignored.
It doesn't throw a nice custom error, but at least it isn't silently
ignored anymore.

Build behavior stays the same.

Author: jankaifer

packages/next/src/client/components/static-generation-async-storage.ts

@@ -10,6 +10,7 @@ export interface StaticGenerationStore {
   forceDynamic?: boolean
   revalidate?: boolean | number
   forceStatic?: boolean
+  dynamicShouldError?: boolean
   pendingRevalidates?: Promise<any>[]
 
   dynamicUsageDescription?: string

packages/next/src/client/components/static-generation-bailout.ts

@@ -8,6 +8,12 @@ export function staticGenerationBailout(reason: string): boolean | never {
     return true
   }
 
+  if (staticGenerationStore?.dynamicShouldError) {
+    throw new Error(
+      `Page with \`dynamic = "error"\` couldn't be rendered statically because it used \`${reason}\``
+    )
+  }
+
   if (staticGenerationStore?.isStaticGeneration) {
     staticGenerationStore.revalidate = 0
     const err = new DynamicServerError(reason)

packages/next/src/server/app-render.tsx

@@ -1191,10 +1191,15 @@ export async function renderToHTMLOrFlight(
         // the nested most config wins so we only force-static
         // if it's configured above any parent that configured
         // otherwise
-        if (layoutOrPageMod.dynamic === 'force-static') {
-          staticGenerationStore.forceStatic = true
-        } else if (layoutOrPageMod.dynamic !== 'error') {
-          staticGenerationStore.forceStatic = false
+        if (layoutOrPageMod.dynamic === 'error') {
+          staticGenerationStore.dynamicShouldError = true
+        } else {
+          staticGenerationStore.dynamicShouldError = false
+          if (layoutOrPageMod.dynamic === 'force-static') {
+            staticGenerationStore.forceStatic = true
+          } else {
+            staticGenerationStore.forceStatic = false
+          }
         }
       }
 

test/development/acceptance-app/dynamic-error.test.ts

@@ -0,0 +1,42 @@
+/* eslint-env jest */
+import { sandbox } from './helpers'
+import { createNextDescribe } from 'e2e-utils'
+import path from 'path'
+
+createNextDescribe(
+  'dynamic = "error" in devmode',
+  {
+    files: path.join(__dirname, 'fixtures', 'default-template'),
+    skipStart: true,
+  },
+  ({ next }) => {
+    it('should show error overlay when dynamic is forced', async () => {
+      const { session, cleanup } = await sandbox(next, undefined, '/server')
+
+      // dynamic = "error" and force dynamic
+      await session.patch(
+        'app/server/page.js',
+        `
+        import { cookies } from 'next/headers';
+
+        import Component from '../../index'
+
+        export default function Page() {
+          cookies()
+          return <Component />
+        }
+
+        export const dynamic = "error"
+      `
+      )
+
+      await session.hasRedbox(true)
+      console.log(await session.getRedboxDescription())
+      expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
+        `"Error: Page with \`dynamic = \\"error\\"\` couldn't be rendered statically because it used \`cookies\`"`
+      )
+
+      await cleanup()
+    })
+  }
+)