decode magic identifiers when printing compile errors to the console

packages/next/src/server/lib/router-utils/setup-dev-bundler.ts

@@ -131,12 +131,16 @@ import type { ActionManifest } from '../../../build/webpack/plugins/flight-clien
 import { denormalizePagePath } from '../../../shared/lib/page-path/denormalize-page-path'
 import type { LoadableManifest } from '../../load-components'
 import { generateRandomActionKeyRaw } from '../../app-render/action-encryption-utils'
-import { bold, green, red } from '../../../lib/picocolors'
+import { bold, green, magenta, red } from '../../../lib/picocolors'
 import { writeFileAtomic } from '../../../lib/fs/write-atomic'
 import { PAGE_TYPES } from '../../../lib/page-types'
 import { trace } from '../../../trace'
 import type { VersionInfo } from '../../dev/parse-version-info'
 import type { NextFontManifest } from '../../../build/webpack/plugins/next-font-manifest-plugin'
+import {
+  MAGIC_IDENTIFIER_REGEX,
+  decodeMagicIdentifier,
+} from '../../../shared/lib/magic-identifier'
 
 const MILLISECONDS_IN_NANOSECOND = 1_000_000
 const wsServer = new ws.Server({ noServer: true })
@@ -2679,13 +2683,23 @@ export async function setupDevBundler(opts: SetupOpts) {
 export type DevBundler = Awaited<ReturnType<typeof setupDevBundler>>
 
 function renderStyledStringToErrorAnsi(string: StyledString): string {
+  function decodeMagicIdentifiers(str: string): string {
+    return str.replaceAll(MAGIC_IDENTIFIER_REGEX, (ident) => {
+      try {
+        return magenta(`{${decodeMagicIdentifier(ident)}}`)
+      } catch (e) {
+        return magenta(`{${ident} (decoding failed: ${e})}`)
+      }
+    })
+  }
+
   switch (string.type) {
     case 'text':
-      return string.value
+      return decodeMagicIdentifiers(string.value)
     case 'strong':
-      return bold(red(string.value))
+      return bold(red(decodeMagicIdentifiers(string.value)))
     case 'code':
-      return green(string.value)
+      return green(decodeMagicIdentifiers(string.value))
     case 'line':
       return string.value.map(renderStyledStringToErrorAnsi).join('')
     case 'stack':

packages/next/src/shared/lib/magic-identifier.ts

@@ -0,0 +1,95 @@
+function decodeHex(hexStr: string): string {
+  if (hexStr.trim() === '') {
+    throw new Error("can't decode empty hex")
+  }
+
+  const num = parseInt(hexStr, 16)
+  if (isNaN(num)) {
+    throw new Error(`invalid hex: \`${hexStr}\``)
+  }
+
+  return String.fromCodePoint(num)
+}
+
+const enum Mode {
+  Text,
+  Underscore,
+  Hex,
+  LongHex,
+}
+
+const DECODE_REGEX = /^__TURBOPACK__([a-zA-Z0-9_$]+)__$/
+
+export function decodeMagicIdentifier(identifier: string): string {
+  const matches = identifier.match(DECODE_REGEX)
+  if (!matches) {
+    return identifier
+  }
+
+  const inner = matches[1]
+
+  let output = ''
+
+  let mode: Mode = Mode.Text
+  let buffer = ''
+  for (let i = 0; i < inner.length; i++) {
+    const char = inner[i]
+
+    if (mode === Mode.Text) {
+      if (char === '_') {
+        mode = Mode.Underscore
+      } else if (char === '$') {
+        mode = Mode.Hex
+      } else {
+        output += char
+      }
+    } else if (mode === Mode.Underscore) {
+      if (char === '_') {
+        output += ' '
+        mode = Mode.Text
+      } else if (char === '$') {
+        output += '_'
+        mode = Mode.Hex
+      } else {
+        output += char
+        mode = Mode.Text
+      }
+    } else if (mode === Mode.Hex) {
+      if (buffer.length === 2) {
+        output += decodeHex(buffer)
+        buffer = ''
+      }
+
+      if (char === '_') {
+        if (buffer !== '') {
+          throw new Error(`invalid hex: \`${buffer}\``)
+        }
+
+        mode = Mode.LongHex
+      } else if (char === '$') {
+        if (buffer !== '') {
+          throw new Error(`invalid hex: \`${buffer}\``)
+        }
+
+        mode = Mode.Text
+      } else {
+        buffer += char
+      }
+    } else if (mode === Mode.LongHex) {
+      if (char === '_') {
+        throw new Error(`invalid hex: \`${buffer + char}\``)
+      } else if (char === '$') {
+        output += decodeHex(buffer)
+        buffer = ''
+
+        mode = Mode.Text
+      } else {
+        buffer += char
+      }
+    }
+  }
+
+  return output
+}
+
+export const MAGIC_IDENTIFIER_REGEX = /__TURBOPACK__[a-zA-Z0-9_$]+__/g