In https://github.com/facebook/react/pull/34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs.
In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided.
To express that a codeblock has an expected error, we can use the following metadata:
```ts
// pseudo type def
type MarkdownCodeBlockMetadata = {
expectedErrors?: {
'react-compiler'?: number[];
};
};
```
and can be used like so:
````
```js {expectedErrors: {'react-compiler': [4]}}
// ❌ setState directly in render
function Component({value}) {
const [count, setCount] = useState(0);
setCount(value); // error on L4
return <div>{count}</div>;
}
```
````
Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
While rewriting the compiler docs I happened to notice some deadlinks. This PR adds a new `yarn deadlinks` script to identify all deadlinks.
I decided to make this a script for now for simplicity but in the future could be ported to an ESlint rule.
The script handles:
- [x] checks images correctly (images are stored in /public but links can omit the /public)
- [x] looks up React error codes for dynamic error pages
- [x] lints links to contributors and uses URL from acknowledgements page if the member is no longer active on the core team
- [x] special injected anchor tags like #recap and #challenges
Example:
```
yarn run v1.22.22
$ node scripts/deadLinkChecker.js
Checking 177 markdown files...
Fetched 552 React error codes
src/content/learn/add-react-to-an-existing-project.md:23:58
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/add-react-to-an-existing-project.md:27:45
Link text: benefit from the best practices
URL: /learn/start-a-new-react-project#can-i-use-react-without-a-framework
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/add-react-to-an-existing-project.md:152:269
Link text: a React framework
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/synchronizing-with-effects.md:735:18
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/typescript.md:16:3
Link text: Common types from `@types/react`
URL: /learn/typescript/#useful-types
✗ Target file not found for: /learn/typescript/
src/content/learn/typescript.md:17:3
Link text: Further learning locations
URL: /learn/typescript/#further-learning
✗ Target file not found for: /learn/typescript/
src/content/learn/typescript.md:23:5
Link text: production-grade React frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/you-might-not-need-an-effect.md:29:399
Link text: frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/you-might-not-need-an-effect.md:754:106
Link text: frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/your-first-component.md:218:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/ViewTransition.md:146:248
Link text: reveal content
URL: /link-to-suspense-below
✗ Target file not found for: /link-to-suspense-below
src/content/reference/react/captureOwnerStack.md:60:94
Link text: `errorInfo.componentStack` in `onUncaughtError`
URL: /reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
✗ Anchor #show-a-dialog-for-uncaught-errors not found in reference/react-dom/client/hydrateRoot.md
src/content/reference/react/forwardRef.md:9:65
Link text: here
URL: /blog/2024/04/25/react-19#ref-as-a-prop
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/reference/react/use.md:315:24
Link text: Server Component
URL: /reference/react/components#server-components
✗ Anchor #server-components not found in reference/react/components.md
src/content/reference/react/useEffect.md:899:67
Link text: if you use a framework,
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useEffect.md:1051:18
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useEffect.md:1736:92
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useInsertionEffect.md:136:65
Link text: non-blocking update,
URL: /reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition
✗ Anchor #marking-a-state-update-as-a-non-blocking-transition not found in reference/react/useTransition.md
src/content/reference/react-dom/createPortal.md:53:76
Link text: key.
URL: /learn/rendering-lists/#keeping-list-items-in-order-with-key
✗ Target file not found for: /learn/rendering-lists/
src/content/reference/react-dom/index.md:24:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/index.md:51:3
Link text: `unmountComponentAtNode`
URL: /reference/react-dom/unmountComponentAtNode
✗ Target file not found for: /reference/react-dom/unmountComponentAtNode
src/content/reference/react-dom/preinit.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preinitModule.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preload.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preloadModule.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/directives.md:13:36
Link text: bundlers compatible with React Server Components
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/server-components.md:7:34
Link text: React Server Components
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/server-functions.md:198:28
Link text: `useActionState`
URL: /reference/react-dom/hooks/useFormState
✗ Target file not found for: /reference/react-dom/hooks/useFormState
src/content/reference/rsc/server-functions.md:222:28
Link text: `useActionState`
URL: /reference/react-dom/hooks/useFormState
✗ Target file not found for: /reference/react-dom/hooks/useFormState
src/content/reference/rsc/use-client.md:44:77
Link text: compatible bundlers
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/use-server.md:98:54
Link text: serializable props
URL: /reference/rsc/use-client#passing-props-from-server-to-client-components
✗ Anchor #passing-props-from-server-to-client-components not found in reference/rsc/use-client.md
src/content/reference/react-dom/client/createRoot.md:212:278
Link text: using a framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/client/index.md:7:185
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/components/common.md:919:89
Link text: check out more examples.
URL: /reference/react/useRef#examples-dom
✗ Anchor #examples-dom not found in reference/react/useRef.md
src/content/reference/react-dom/components/form.md:39:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/form.md:233:63
Link text: reference documentation
URL: /reference/react/hooks/useOptimistic
✗ Target file not found for: /reference/react/hooks/useOptimistic
src/content/reference/react-dom/components/input.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/link.md:33:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/meta.md:33:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/option.md:39:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/progress.md:33:27
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/script.md:34:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/select.md:39:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/style.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/textarea.md:33:27
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/title.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/server/index.md:7:182
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/static/index.md:7:146
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2023/03/16/introducing-react-dev.md:45:5
Link text: API Reference
URL: /reference
✗ Target file not found for: /reference
src/content/blog/2023/03/16/introducing-react-dev.md:610:117
Link text: Alternatives
URL: /reference/react-dom/findDOMNode#alternatives
✗ Target file not found for: /reference/react-dom/findDOMNode
src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:34:40
Link text: Next.js App Router
URL: /learn/start-a-new-react-project#nextjs-app-router
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:95:605
Link text: Next.js App Router
URL: /learn/start-a-new-react-project#nextjs-app-router
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md:110:3
Link text: Sathya Gunasekaran
URL: /community/team#sathya-gunasekaran
✗ Contributor link should be updated to: https://github.com/gsathya
src/content/blog/2024/04/25/react-19-upgrade-guide.md:132:20
Link text: improved how errors are handled
URL: /blog/2024/04/25/react-19#error-handling
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/blog/2024/04/25/react-19-upgrade-guide.md:502:19
Link text: `ref` as a prop
URL: /blog/2024/04/25/react-19#ref-as-a-prop
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/blog/2024/12/05/react-19.md:358:391
Link text: Full-stack React Architecture
URL: /learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2024/12/05/react-19.md:392:28
Link text: React Server Actions
URL: /reference/rsc/server-actions
✗ Target file not found for: /reference/rsc/server-actions
src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md:2498:37
Link text: view transition classes
URL: /reference/react/ViewTransition#view-transition-classes
✗ Anchor #view-transition-classes not found in reference/react/ViewTransition.md
Found 58 dead links out of 1555 total links
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
* fix: Update @codesandbox/sandpack-react version to 2.13.3
* fix: Fixed bundlerURL to use the correct URL
* fix: Update @codesandbox/sandpack-react to version 2.13.4
* style: Hide span element in sp-icon-standalone when loading
* Fix overflowing text content in footer link
Add an ellipsis to overflowing text in the footer section for navigating between different references.
* Add min and max width to nextlink class
* Add minwidth to tailwind config
* Wrap string beyond max width
* Remove title attribute from span element
* Upgrade tailwind to 3.4.1
* Remove manual width config from minWidth
* Remove minWidth from tailwind config and preserve default value of min-w-xs
* Update TailwindCSS & Install rtl-detect
1- Update TailwindCSS to use the logical properities such as `ps-1` instead of `pl-1`.
there are logical properities for margin, padding, inset, and text direction.
2- Install `rtl-detect` detect if the language is RTL direction.
Note: this might be uninstalled if we use the manual way to specify rtl language.
* add `siteConfig.isRTL`
* add `dir` attribute to the root element
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* Refactor TW classes: Use logical properties over directional properties.
* Revert "Refactor TW classes: Use logical properties over directional properties."
This reverts commit df9620d944.
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: Use logical properties over directional properties.
* Add `start` and `end` directions to the `IconNavArrow`
* Add Note about `isRTL` prop
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* set dir attr of `CodeBlock` to `ltr` even the page dir is `rtl`
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Add `start` and `end` directions to some icons
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* set dir attr of `ConsoleBlock` to `ltr` to overwrite the dir of root element
* Refactor TW classes: use logical properties over directional properties
* set dir=ltr on inline code blocks to overwrite <html dir="rtl"> in some languages
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* set translate=no, dir=ltr on `TerminalBlock` to overwrite <html dir="rtl"> in rtl languages
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* fix some direction styles
* fix arrow directions in rtl
* remove `rtl-detect` and set `siteConfig.isRTL` manually
* fix `Breadcrumbs`'s arrow direction in rtl languages
* fix some directions of the search modal for RTL languages
* hard setting dir=ltr to Sandpack to overwrite rtl languages dir
* Refactor TW classes: use logical properties over directional properties
* remove my notes
* fix: rerverse space-x-* in rtl
* rebase with the main branch
* remove unnecessary alt
* add `start` & `end` display directions to the Chevron Icon
* rebase with the main branch
* Upgrade React and Next
* Fix bug in useNestedScrollLock
I guess refs get disconnected before passive effect cleanup runs. useLayoutEffect would also fix it but maybe this is better.
