[DevOverlay] Sync Terminal component with CodeFrame for Build Error #74831

devjiwonchoi · 2025-01-13T18:56:36Z

This PR synced the Terminal component style with the CodeFrame component for the Build Error. Technically, we may merge those two, but we haven't yet, as we need to consider more edge cases for the Build Error.

Light

Dark

Closes NDX-644

devjiwonchoi · 2025-01-13T18:56:51Z

[DevOverlay] Sync Terminal component with CodeFrame for Build Error #74831 👈 (View in Graphite)
[DevOverlay] Hydration Error Code Frame #74822
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

huozhi · 2025-01-13T19:02:06Z

...components/react-dev-overlay/_experimental/internal/components/Terminal/Terminal.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'


If we can rename the new or existing files to kebab format we should do it earlier otherwise just leave too many files to change later

ijjk · 2025-01-13T19:05:57Z

Failing test suites

Commit: 3498990

pnpm test test/integration/next-image-new/app-dir/test/static.test.ts (turbopack)

Static Image Component Tests > production mode > Should allow an image with a static src to omit height and width
Static Image Component Tests > production mode > Should use immutable cache-control header for static import
Static Image Component Tests > production mode > Should use immutable cache-control header even when unoptimized
Static Image Component Tests > production mode > should have containing followed by for priority image
Static Image Component Tests > production mode > Should automatically provide an image height and width
Static Image Component Tests > production mode > should use width and height prop to override import
Static Image Component Tests > production mode > should use height prop to adjust both width and height
Static Image Component Tests > production mode > should use width prop to adjust both width and height
Static Image Component Tests > production mode > should add a data URL placeholder to an image
Static Image Component Tests > production mode > should add a blur placeholder a statically imported jpg
Static Image Component Tests > production mode > should add a blur placeholder a statically imported png
Static Image Component Tests > production mode > should add a blur placeholder a statically imported png with fill
Static Image Component Tests > production mode > should add placeholder with blurDataURL and fill
Static Image Component Tests > production mode > should add placeholder even when blurDataURL aspect ratio does not match width/height ratio
Static Image Component Tests > production mode > should load direct imported image

Expand output

● Static Image Component Tests › production mode › Should allow an image with a static src to omit height and width

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › Should use immutable cache-control header for static import

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › Should use immutable cache-control header even when unoptimized

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should have containing followed by for priority image

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › Should automatically provide an image height and width

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should use width and height prop to override import

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should use height prop to adjust both width and height

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should use width prop to adjust both width and height

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should add a data URL placeholder to an image

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should add a blur placeholder a statically imported jpg

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should add a blur placeholder a statically imported png

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should add a blur placeholder a statically imported png with fill

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should add placeholder with blurDataURL and fill

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should add placeholder even when blurDataURL aspect ratio does not match width/height ratio

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

● Static Image Component Tests › production mode › should load direct imported image

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  255 |     'production mode',
  256 |     () => {
> 257 |       beforeAll(async () => {
      |       ^
  258 |         await nextBuild(appDir)
  259 |         appPort = await findPort()
  260 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/app-dir/test/static.test.ts:257:7)
  at integration/next-image-new/app-dir/test/static.test.ts:254:56
  at Object.describe (integration/next-image-new/app-dir/test/static.test.ts:253:1)

Read more about building and testing Next.js in contributing.md.

ijjk · 2025-01-13T19:08:18Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
buildDuration	17.4s	15s	N/A
buildDurationCached	14.3s	12s	N/A
nodeModulesSize	417 MB	417 MB	⚠️ +59.7 kB
nextStartRea..uration (ms)	416ms	416ms	✓

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
5306-HASH.js gzip	53.4 kB	53.4 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.44 kB	5.44 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	52.9 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	240 B	242 B	N/A
main-HASH.js gzip	34.2 kB	34.2 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.57 kB	4.57 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
_buildManifest.js gzip	749 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
index.html gzip	524 B	523 B	N/A
link.html gzip	539 B	538 B	N/A
withRouter.html gzip	520 B	520 B	✓
Overall change	520 B	520 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	207 kB	207 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
middleware-b..fest.js gzip	669 B	668 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.3 kB	31.3 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	369 kB	369 kB	⚠️ +241 B
app-page-exp..prod.js gzip	130 kB	130 kB	✓
app-page-tur..prod.js gzip	142 kB	142 kB	✓
app-page-tur..prod.js gzip	138 kB	138 kB	✓
app-page.run...dev.js gzip	357 kB	357 kB	⚠️ +251 B
app-page.run..prod.js gzip	126 kB	126 kB	✓
app-route-ex...dev.js gzip	37.6 kB	37.6 kB	✓
app-route-ex..prod.js gzip	25.6 kB	25.6 kB	✓
app-route-tu..prod.js gzip	25.6 kB	25.6 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	2.46 MB	2.46 MB	⚠️ +492 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error	Change
0.pack gzip	2.09 MB	2.1 MB	⚠️ +12.5 kB
index.pack gzip	75 kB	75 kB	N/A
Overall change	2.09 MB	2.1 MB	⚠️ +12.5 kB

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Commit: f8c240a

packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/FileIcon.tsx

reset

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 13, 2025

devjiwonchoi mentioned this pull request Jan 13, 2025

[DevOverlay] Hydration Error Code Frame #74822

Merged

devjiwonchoi marked this pull request as ready for review January 13, 2025 18:59

devjiwonchoi requested review from huozhi, eps1lon and gaojude January 13, 2025 19:00

huozhi previously approved these changes Jan 13, 2025

View reviewed changes

huozhi reviewed Jan 13, 2025

View reviewed changes

packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/FileIcon.tsx Outdated Show resolved Hide resolved

devjiwonchoi force-pushed the 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error branch 4 times, most recently from 4be67ae to aa6355e Compare January 14, 2025 06:34

devjiwonchoi requested a review from huozhi January 14, 2025 06:41

huozhi approved these changes Jan 14, 2025

View reviewed changes

devjiwonchoi changed the base branch from hydration-code-frame to graphite-base/74831 January 14, 2025 10:22

devjiwonchoi added 2 commits January 14, 2025 10:23

[DevOverlay] Sync Terminal component with CodeFrame for Build Error

1227e32

kebab for file

298f33e

devjiwonchoi force-pushed the 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error branch from 3498990 to d9452b9 Compare January 14, 2025 10:23

devjiwonchoi force-pushed the graphite-base/74831 branch from f3ae0fa to b0c14f6 Compare January 14, 2025 10:23

devjiwonchoi changed the base branch from graphite-base/74831 to canary January 14, 2025 10:24

terminal to kebab

f8c240a

devjiwonchoi force-pushed the 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error branch from d9452b9 to f8c240a Compare January 14, 2025 10:24

devjiwonchoi merged commit 0d1dd9c into canary Jan 14, 2025
127 of 130 checks passed

devjiwonchoi deleted the 01-14-_devoverlay_sync_terminal_component_with_codeframe_for_build_error branch January 14, 2025 12:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevOverlay] Sync Terminal component with CodeFrame for Build Error #74831

[DevOverlay] Sync Terminal component with CodeFrame for Build Error #74831

devjiwonchoi commented Jan 13, 2025 •

edited

Loading

devjiwonchoi commented Jan 13, 2025 •

edited

Loading

huozhi Jan 13, 2025

ijjk commented Jan 13, 2025 •

edited

Loading

ijjk commented Jan 13, 2025 •

edited

Loading

		@@ -0,0 +1,42 @@
		import type { Meta, StoryObj } from '@storybook/react'

[DevOverlay] Sync Terminal component with CodeFrame for Build Error #74831

[DevOverlay] Sync Terminal component with CodeFrame for Build Error #74831

Conversation

devjiwonchoi commented Jan 13, 2025 • edited Loading

Light

Dark

devjiwonchoi commented Jan 13, 2025 • edited Loading

huozhi Jan 13, 2025

Choose a reason for hiding this comment

ijjk commented Jan 13, 2025 • edited Loading

Failing test suites

ijjk commented Jan 13, 2025 • edited Loading

Stats from current PR

devjiwonchoi commented Jan 13, 2025 •

edited

Loading

devjiwonchoi commented Jan 13, 2025 •

edited

Loading

ijjk commented Jan 13, 2025 •

edited

Loading

ijjk commented Jan 13, 2025 •

edited

Loading