SolidJSS
SolidJS•3y ago•
11 replies
foolswisdom

Child component cannot access context that the parent can access?

I have a file like this:
import { useLexicalComposerContext } from "./LexicalComposerContext";
import { useLexicalEditable } from "./useLexicalEditable";
import { useCanShowPlaceholder } from "./shared/useCanShowPlaceholder";
import { ErrorBoundaryType, useDecorators } from "./shared/useDecorators";
import { useRichTextSetup } from "./shared/useRichTextSetup";
import { JSX, Show, createMemo } from "solid-js";
import { untrack } from "solid-js/web";

export function RichTextPlugin(params: {
  contentEditable: JSX.Element;
  placeholder:
    | ((isEditable: boolean) => null | JSX.Element)
    | null
    | JSX.Element;
  errorBoundary: ErrorBoundaryType;
}): JSX.Element {
  const [editor] = useLexicalComposerContext();
  const decorators = useDecorators(editor, params.errorBoundary);
  useRichTextSetup(editor);

  return (
    <>
      {params.contentEditable}
      <Placeholder content={params.placeholder} />
      {decorators}
    </>
  );
}

type ContentFunction = (isEditable: boolean) => null | JSX.Element;

function Placeholder(props: {
  content: ContentFunction | null | JSX.Element;
}): JSX.Element {
  const [editor] = useLexicalComposerContext();
  ...

  return (
    ...
  );
}


As you can see, the RichTextPlugin component renders the Placeholder component. Except that I get an error:
Uncaught Error: useLexicalComposerContext: cannot find a LexicalComposerContext
    at useLexicalComposerContext (LexicalComposerContext.jsx:22:19)
    at useLexicalSubscription (useLexicalSubscription.js?v=e7acaa61:7:22)
    at useLexicalEditable (useLexicalEditable.js?v=e7acaa61:11:12)
    at Placeholder (LexicalRichTextPlugin.jsx:21:22)
    ....


... which is the error thrown by useLexicalComposerContext when the context is empty.

Now, the useLexicalComposerContext is called in the parent component as well, and it returns the editor successfully, no errors (I added logs to double check as well). So why is the child unable to access it?

I also added some getOwner logs (not shown), and they show the parent as having an owner, but that the owner of the child is null.

I'm quite frustrated, if anyone has an idea, please help!
Was this page helpful?