mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Aurora ScharffandGitHub
18d2e2da5f
## Summary
The instant / blocking-prerender insight console errors printed a docs
URL under each fix option (two or three anchors per message). This
collapses them to a single `Learn more:` link at the end of each
message, while keeping the `[stream]`/`[cache]`/`[block]` fix-option
labels. It restores the single-link format these builders originally
shipped with.
**Before:**
```
Ways to fix this:
- [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
https://nextjs.org/docs/messages/blocking-prerender-runtime#wrap-in-or-move-into-suspense
- [block] Set `export const instant = false` to allow a blocking route
https://nextjs.org/docs/messages/blocking-prerender-runtime#allow-blocking-route
```
**After:**
```
Ways to fix this:
- [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
- [block] Set `export const instant = false` to allow a blocking route
Learn more: https://nextjs.org/docs/messages/blocking-prerender-runtime
```
Covers all 16 insight-kind errors, across `blocking-route-messages.ts`,
`sync-io-messages.ts`, `dynamic-rendering-utils.ts`, and
`instant-messages.ts`.
Because the dev overlay classified these errors by the `#`-anchored docs
URL, `getBlockingRouteErrorDetails` is updated to match the anchor-less
`Learn more:` URL. Console-message snapshots and the guidance-data
extraction test are updated to the new format. The dev-overlay fix-card
data (`instant-guidance-data.ts`) keeps its per-card links, since those
are the overlay UI rather than the console message.
## Verification
- `pnpm --filter=next types`
- Snapshots regenerated with `jest -u` for the affected suites
<!-- NEXT_JS_LLM -->
85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
|
|
describe('missing-suspense-with-csr-bailout', () => {
|
|
const { next, isNextDev, skipped } = nextTestSetup({
|
|
files: __dirname,
|
|
skipStart: true,
|
|
// This test is skipped when deployed because it's not possible to rename files after deployment.
|
|
skipDeployment: true,
|
|
})
|
|
|
|
if (skipped) {
|
|
return
|
|
}
|
|
|
|
if (isNextDev) {
|
|
it.skip('skip test for development mode', () => {})
|
|
return
|
|
}
|
|
|
|
beforeEach(async () => {
|
|
await next.clean()
|
|
})
|
|
|
|
const isCacheComponentsEnabled =
|
|
process.env.__NEXT_CACHE_COMPONENTS === 'true'
|
|
|
|
describe('useSearchParams', () => {
|
|
const message = isCacheComponentsEnabled
|
|
? 'https://nextjs.org/docs/messages/blocking-prerender-client-hook'
|
|
: `useSearchParams() should be wrapped in a suspense boundary at page "/".`
|
|
|
|
it('should fail build if useSearchParams is not wrapped in a suspense boundary', async () => {
|
|
const { exitCode } = await next.build()
|
|
expect(exitCode).toBe(1)
|
|
expect(next.cliOutput).toContain(message)
|
|
// Can show the trace where the searchParams hook is used
|
|
// TODO: This path is different for Turbopack. Builds need to have sourcemaps support.
|
|
if (!process.env.IS_TURBOPACK_TEST) {
|
|
expect(next.cliOutput).toMatch(/at.*server[\\/]app[\\/]page.js/)
|
|
}
|
|
})
|
|
|
|
it('should pass build if useSearchParams is wrapped in a suspense boundary', async () => {
|
|
await next.renameFile('app/layout.js', 'app/layout-no-suspense.js')
|
|
await next.renameFile('app/layout-suspense.js', 'app/layout.js')
|
|
|
|
await expect(next.build()).resolves.toEqual({
|
|
exitCode: 0,
|
|
cliOutput: expect.not.stringContaining(message),
|
|
})
|
|
|
|
await next.renameFile('app/layout.js', 'app/layout-suspense.js')
|
|
await next.renameFile('app/layout-no-suspense.js', 'app/layout.js')
|
|
})
|
|
})
|
|
|
|
describe('next/dynamic', () => {
|
|
beforeEach(async () => {
|
|
await next.renameFile('app/page.js', 'app/_page.js')
|
|
await next.start()
|
|
})
|
|
afterEach(async () => {
|
|
await next.renameFile('app/_page.js', 'app/page.js')
|
|
})
|
|
|
|
it('does not emit errors related to bailing out of client side rendering', async () => {
|
|
const browser = await next.browser('/dynamic', {
|
|
pushErrorAsConsoleLog: true,
|
|
})
|
|
|
|
try {
|
|
await browser.waitForElementByCss('#dynamic')
|
|
|
|
expect(await browser.log()).not.toContainEqual(
|
|
expect.objectContaining({
|
|
source: 'error',
|
|
})
|
|
)
|
|
} finally {
|
|
await browser.close()
|
|
}
|
|
})
|
|
})
|
|
})
|