{"record":{"id":"512869d2c57ecb95","repo":"mastra-ai/mastra","slug":"componentname-must-be-used-within-environmentva","errorCode":null,"errorMessage":"${componentName} must be used within EnvironmentVariablesEditor.Root","messagePattern":"(.+?) must be used within EnvironmentVariablesEditor\\.Root","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/playground-ui/src/ds/components/EnvironmentVariablesEditor/environment-variables-editor-context.ts","lineNumber":42,"sourceCode":"\nexport interface EnvironmentVariablesEditorContextValue {\n  editor: EnvironmentVariablesEditorRenderController;\n  disabled: boolean;\n  readOnly: boolean;\n  rowErrors?: EnvironmentVariablesEditorRowErrors;\n}\n\nexport const EnvironmentVariablesEditorContext = createContext<EnvironmentVariablesEditorContextValue | null>(null);\n\nexport const EnvironmentVariablesEditorReadOnlyListContext = createContext({\n  showIcon: false,\n});\n\nexport function useEnvironmentVariablesEditorContext(componentName: string) {\n  const context = use(EnvironmentVariablesEditorContext);\n\n  if (!context) {\n    throw new Error(`${componentName} must be used within EnvironmentVariablesEditor.Root`);\n  }\n\n  return context;\n}\n","sourceCodeStart":24,"sourceCodeEnd":47,"githubUrl":"https://github.com/mastra-ai/mastra/blob/75dd419e613fe9c39f846ffc500716141b74fda6/packages/playground-ui/src/ds/components/EnvironmentVariablesEditor/environment-variables-editor-context.ts#L24-L47","documentation":"useEnvironmentVariablesEditorContext(componentName) reads the EnvironmentVariablesEditorContext provided by EnvironmentVariablesEditor.Root. When the context is null the hook throws a message naming the offending component, enforcing that editor subcomponents (fields, rows, toolbar buttons) only render inside the Root.","triggerScenarios":"Rendering any EnvironmentVariablesEditor subcomponent (editor, disabled/readOnly consumers, row error consumers) outside <EnvironmentVariablesEditor.Root>; conditionally rendering Root away while children persist; composing subcomponents in a custom wrapper that breaks the provider chain.","commonSituations":"Reusing a row or field component in a different page without Root; snapshot/storybook usage that mounts subcomponents directly; refactoring that moved a child above the Root in the component tree.","solutions":["Wrap the subtree in <EnvironmentVariablesEditor.Root>...</EnvironmentVariablesEditor.Root>.","Read the error message: the interpolated componentName tells you exactly which component is orphaned — fix its placement first.","If standalone usage is intended, add a nullable context hook variant instead of the throwing one.","Check for early returns/conditionals that render children without Root in the same render pass."],"exampleFix":"// before\n<EditorRow name=\"KEY\" /> // no Root\n// after\n<EnvironmentVariablesEditor.Root editor={editor}>\n  <EditorRow name=\"KEY\" />\n</EnvironmentVariablesEditor.Root>","handlingStrategy":"try-catch","validationCode":"// Verify nesting before rendering the subcomponent:\n// <EnvironmentVariablesEditor.Root editor={editor}> must be an ancestor.\n// Runtime check with a nullable variant (if added):\nconst ctx = useMaybeEnvironmentVariablesEditorContext();\nif (!ctx) throw new Error('EnvironmentVariablesEditor subcomponent used outside Root');","typeGuard":"function hasEditorContext(ctx: EnvironmentVariablesEditorContext | null): ctx is EnvironmentVariablesEditorContext {\n  return ctx !== null;\n}","tryCatchPattern":"// Hooks cannot be wrapped in try/catch; catch at the error boundary:\n<ErrorBoundary fallback={<EditorSetupPrompt />}>\n  <MyEditorSubcomponent />\n</ErrorBoundary>","preventionTips":["Wrap every EnvironmentVariablesEditor subcomponent in its Root.","When reusing rows/fields elsewhere, pass the editor object as a prop instead of relying on context.","Read the thrown componentName to locate the orphaned component quickly.","Keep provider + consumers in the same feature module to prevent tree drift."],"tags":["react","context","compound-components","playground-ui"],"backgroundTag":"missing-react-context-provider","analyzedSha":"75dd419e613fe9c39f846ffc500716141b74fda6","analyzedAt":"2026-08-30T00:15:31.844Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}