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 (
    ...
  );
}

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)
    ....

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!

2 Replies

REEEEE•2y ago

Could it have something to do with the fragments?

foolswisdom•2y ago

I checked that, it's not that I'm realizing now that this is all more complicated than the information I gave above. sigh Still trying to narrow down where the issue is Okay, I figured it out The error is actually thrown later in the child component, at a line like this:

    const editable = useLexicalEditable();

    const editable = useLexicalEditable();

Now, useLexicalEditable internally calls useLexicalComposerContext, but useLexicalEditable is defined in a .ts (compiled to .js) file while these components were declared in .tsx (compile to .jsx) file. For further context, these files are all inside a package, the issue did not appear when using the package in the monorepo where it was declared So my guess is that vite ends up with different files / instances of the context (because only .jsx files are fed through the solid vite plugin), so code in .js files weren't able to see the context defined in .jsx files Something roughly like that, I expect those here who have worked on the tooling side of things would have a better idea So, solved Now, what is the right way of marking this as answered?

Gaming

Programming

Child component cannot access context that the parent can access?