From d0020bc7214c1c73b00f5d9d91c2ec0682663fc6 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 8 Feb 2026 17:25:03 -0500 Subject: [PATCH 1/3] feat: use ConsoleBlockMulti style for ErrorDecoder and add isCustom error page support --- src/components/MDX/ErrorDecoder.tsx | 47 ++++++++++++++++++++++++++--- src/pages/errors/[errorCode].tsx | 16 ++++++++-- 2 files changed, 55 insertions(+), 8 deletions(-) diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx index 423790198bf..61ff261aeb8 100644 --- a/src/components/MDX/ErrorDecoder.tsx +++ b/src/components/MDX/ErrorDecoder.tsx @@ -8,6 +8,7 @@ import {useEffect, useState} from 'react'; import {useErrorDecoderParams} from '../ErrorDecoderContext'; import cn from 'classnames'; +import {IconError} from '../Icon/IconError'; function replaceArgs( msg: string, @@ -108,12 +109,48 @@ export default function ErrorDecoder() { }, [errorCode, hasParams, errorMessage]); return ( - - {message} - + )} + translate="no" + dir="ltr"> +
+
+
+
+
+
+ Console +
+
+
+
+
+
+
+
+
+
+ +
+ {message} +
+
+
+
); } diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx index 67466a1d991..5e3acd94f7b 100644 --- a/src/pages/errors/[errorCode].tsx +++ b/src/pages/errors/[errorCode].tsx @@ -20,26 +20,33 @@ interface ErrorDecoderProps { content: string; toc: string; meta: any; + isCustom: boolean; } export default function ErrorDecoderPage({ errorMessage, errorCode, content, + toc, + isCustom, }: InferGetStaticPropsType) { const parsedContent = useMemo( () => JSON.parse(content, reviveNodeOnClient), [content] ); + const parsedToc = useMemo( + () => (isCustom ? JSON.parse(toc, reviveNodeOnClient) : []), + [toc, isCustom] + ); return ( @@ -117,11 +124,13 @@ export const getStaticProps: GetStaticProps = async ({ // Read MDX from the file. let path = params?.errorCode || 'index'; let mdx; + let isCustom = true; try { mdx = fs.readFileSync(rootDir + '/' + path + '.md', 'utf8'); } catch { // if [errorCode].md is not found, fallback to generic.md mdx = fs.readFileSync(rootDir + '/generic.md', 'utf8'); + isCustom = false; } const {content, toc, meta} = await compileMDX(mdx, path, {code, errorCodes}); @@ -131,6 +140,7 @@ export const getStaticProps: GetStaticProps = async ({ content, toc, meta, + isCustom, errorCode: code, errorMessage: code ? errorCodes[code] : null, }, From f233ff779cacd23177e9ad03e6b811efdcb930aa Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 8 Feb 2026 17:25:54 -0500 Subject: [PATCH 2/3] feat: add custom error page for React error 377 --- src/content/errors/377.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/content/errors/377.md b/src/content/errors/377.md index 6269e9d06d6..767062cd2e7 100644 --- a/src/content/errors/377.md +++ b/src/content/errors/377.md @@ -1,13 +1,17 @@ -In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. +This page explains this React error and common ways to fix it. -We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message. - -The full text of the error you just encountered is: +The full text of the error is: + + +In the minified production build of React, full error messages are replaced with short codes to reduce bundle size. We recommend using the development build when debugging, as it includes additional warnings and debug information. + + + This error occurs when you pass a BigInt value from a Server Component to a Client Component. From 7ddd91f80611c3f928715fefad656f4cdb14684f Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 8 Feb 2026 17:42:16 -0500 Subject: [PATCH 3/3] claude you suck ass at git for real my guy --- src/content/errors/321.md | 127 ++++++++++++++++++++++++++++++++++++++ src/content/errors/377.md | 12 ++-- 2 files changed, 131 insertions(+), 8 deletions(-) create mode 100644 src/content/errors/321.md diff --git a/src/content/errors/321.md b/src/content/errors/321.md new file mode 100644 index 00000000000..64c664f5e5b --- /dev/null +++ b/src/content/errors/321.md @@ -0,0 +1,127 @@ + + +This page explains this React error and common ways to fix it. + + + +The full text of the error is: + + + + + +In the minified production build of React, full error messages are replaced with short codes to reduce bundle size. We recommend using the development build when debugging, as it includes additional warnings and debug information. + + + +## What This Error Means {/*what-this-error-means*/} + +This error occurs when a Hook is called in a way that violates the [Rules of Hooks](/reference/rules/rules-of-hooks): + +```js {4} +export default function Counter() { + function handleClick() { + // 🔴 Invalid Hook call! + const [count, setCount] = useState(0); + setCount(count + 1); + } + + return ; +} +``` + +You can only call Hooks at the top level of a function component or a custom Hook. React tracks Hooks by associating them with the component that is currently rendering. When you call a Hook and no component is rendering, React cannot associate the Hook with a component, and throws this error. + +The most common cause is calling a Hook outside a function component. For example, inside an event handler, a class component, or a regular function. Another common cause is having **multiple copies of React** loaded in your app, which is a build configuration problem, not a coding mistake. + +[See the examples below for common causes and how to fix them.](#common-causes) + +## Common Causes {/*common-causes*/} + +### Calling a Hook outside the body of a function component {/*calling-a-hook-outside-the-body-of-a-function-component*/} + +React requires you to call Hooks at the top level of a function component or a custom Hook—not inside event handlers, nested functions, or class components. + +Here is an example of code that would trigger this error: + + + +```js {expectedErrors: {'react-compiler': [7]}} +import { useState } from 'react'; + +export default function Counter() { + function handleClick() { + // 🔴 useState is called inside an event handler, not the component body + // eslint-disable-next-line react-hooks/rules-of-hooks + const [count, setCount] = useState(0); + setCount(count + 1); + } + + return ; +} +``` + + + +To fix this, move the Hook call to the top level of your component: + + + +```js +import { useState } from 'react'; + +// ✅ Fixed: useState is called at the top level of the component +export default function Counter() { + const [count, setCount] = useState(0); + + function handleClick() { + setCount(count + 1); + } + + return ; +} +``` + + + +The same rule applies to class components—you cannot use Hooks in class components. If you need state or other React features in a class component, [convert it to a function component](/reference/react/Component#alternatives). + +### Multiple copies of React in your app {/*multiple-copies-of-react*/} + +If your project uses a monorepo, `npm link`, or a third-party package that bundles its own copy of React, you can end up with two separate copies of React loaded at the same time. When this happens, the copy of React that your component uses is different from the copy that `react-dom` uses, and Hooks break because React can't track them across copies. + +To check if this is your problem, run the following from your project root: + +```bash +npm ls react +``` + +If you see more than one entry for `react`, you have duplicate copies. You can also add a temporary log to confirm. Add this at the top of your component file: + +```js +import React from 'react'; +console.log(React === window.React); // false means duplicates +``` + +If you're using webpack, you can fix this by adding a resolve alias in your webpack config: + +```js +// webpack.config.js +module.exports = { + resolve: { + alias: { + react: require.resolve('react'), + 'react-dom': require.resolve('react-dom'), + }, + }, +}; +``` + +If you're using Vite, add a similar alias in your Vite config. For other bundlers, consult their documentation on how to configure module aliases. + +## Related Documentation {/*related-documentation*/} + +- [Rules of Hooks](/reference/rules/rules-of-hooks) +- [`useState`](/reference/react/useState) +- [Your First Component](/learn/your-first-component) +- [Reusing Logic with Custom Hooks](/learn/reusing-logic-with-custom-hooks) \ No newline at end of file diff --git a/src/content/errors/377.md b/src/content/errors/377.md index 767062cd2e7..6269e9d06d6 100644 --- a/src/content/errors/377.md +++ b/src/content/errors/377.md @@ -1,17 +1,13 @@ -This page explains this React error and common ways to fix it. +In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. -The full text of the error is: +We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message. - - - +The full text of the error you just encountered is: -In the minified production build of React, full error messages are replaced with short codes to reduce bundle size. We recommend using the development build when debugging, as it includes additional warnings and debug information. - - + This error occurs when you pass a BigInt value from a Server Component to a Client Component.