{"record":{"id":"9c7ccff68398221c","repo":"facebook/react","slug":"522","errorCode":"522","errorMessage":"Invalid form element. requestFormReset must be passed a form that was rendered by React.","messagePattern":"Invalid form element\\. requestFormReset must be passed a form that was rendered by React\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-dom/src/ReactDOMSharedInternals.js","lineNumber":28,"sourceCode":"import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';\nimport type {HostDispatcher} from './shared/ReactDOMTypes';\n\nimport noop from 'shared/noop';\n\n// This should line up with NoEventPriority from react-reconciler/src/ReactEventPriorities\n// but we can't depend on the react-reconciler from this isomorphic code.\nexport const NoEventPriority: EventPriority = 0 as any;\n\ntype ReactDOMInternals = {\n  d /* ReactDOMCurrentDispatcher */: HostDispatcher,\n  p /* currentUpdatePriority */: EventPriority,\n  findDOMNode:\n    | null\n    | ((componentOrElement: component(...props: any)) => null | Element | Text),\n};\n\nfunction requestFormReset(element: HTMLFormElement) {\n  throw new Error(\n    'Invalid form element. requestFormReset must be passed a form that was ' +\n      'rendered by React.',\n  );\n}\n\nconst DefaultDispatcher: HostDispatcher = {\n  f /* flushSyncWork */: noop,\n  r /* requestFormReset */: requestFormReset,\n  D /* prefetchDNS */: noop,\n  C /* preconnect */: noop,\n  L /* preload */: noop,\n  m /* preloadModule */: noop,\n  X /* preinitScript */: noop,\n  S /* preinitStyle */: noop,\n  M /* preinitModuleScript */: noop,\n};\n\nconst Internals: ReactDOMInternals = {","sourceCodeStart":10,"sourceCodeEnd":46,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-dom/src/ReactDOMSharedInternals.js#L10-L46","documentation":"The isomorphic react-dom package installs a default dispatcher whose requestFormReset entry (ReactDOMSharedInternals.d.r) always throws; a real implementation is swapped in only when a host config loads (the DOM client renderer in ReactFiberConfigDOM, the Fizz DOM server in ReactFizzConfigDOM, or the Flight server dispatcher). The public requestFormReset(form) API re-exported from 'react-dom' delegates to that dispatcher entry, so calling it before any host config has initialized — or in a bundle where none ever will — raises this error (code 522).","triggerScenarios":"Calling requestFormReset(form) (exported from 'react-dom'/'react-dom/client' via ReactDOMFormActions) in an environment where only the isomorphic build loaded: SSR-only or RSC code paths with no client renderer, custom renderers reusing shared internals, or duplicate react-dom copies so the dispatcher install (ReactFiberConfigDOM.js:5072) lands in a different instance than the one you call.","commonSituations":"Server-side modules invoking ReactDOM.requestFormReset; npm dedupe failures producing two react-dom copies; calling it during SSR instead of inside a client-side form action; passing a form built with document.createElement rather than rendered by React.","solutions":["Only call requestFormReset from client code that runs after react-dom/client has initialized — inside a form action or transition","Run npm ls react react-dom to detect and remove duplicate copies so the dispatcher install is visible to the copy you call","Pass only <form> elements obtained via React refs on React-rendered markup, never querySelector or createElement results","If React is not managing the form, use the native form.reset() instead"],"exampleFix":"// before (runs during SSR — dispatcher never initialized)\nimport {requestFormReset} from 'react-dom';\nrequestFormReset(formRef.current);\n\n// after (runs in a client action)\n'use client';\nimport {requestFormReset} from 'react-dom';\nfunction saveAction() {\n  requestFormReset(formRef.current);\n}","handlingStrategy":"validation","validationCode":"const canRequestReset =\n  typeof window !== 'undefined' && // client renderer available\n  form instanceof window.HTMLFormElement &&\n  form.isConnected; // a real, mounted form\nif (canRequestReset) {\n  requestFormReset(form);\n} else {\n  form.reset(); // native fallback outside React DOM control\n}","typeGuard":"function isClientManagedForm(form: unknown): form is HTMLFormElement {\n  return typeof window !== 'undefined' && form instanceof window.HTMLFormElement && form.isConnected;\n}","tryCatchPattern":"try {\n  requestFormReset(form);\n} catch (e) {\n  if (e instanceof Error && e.message.includes('requestFormReset')) {\n    form.reset(); // dispatcher not initialized or form not React-managed\n  } else {\n    throw e;\n  }\n}","preventionTips":["Call requestFormReset only from client-side form actions or transitions","Obtain the form through a React ref on a rendered <form>, never querySelector","Run npm ls react react-dom after dependency changes to catch duplicate dispatcher copies","Prefer <form action={fn}> auto-reset, which never touches this API"],"tags":["react-dom","forms","requestformreset","module-initialization","duplicate-react"],"backgroundTag":"react-dom-dispatcher-not-initialized","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}