foolswisdom Posts - Answer Overflow

foolswisdom

•Created by foolswisdom on 1/26/2023 in #support

Using renderToString in node

I have a file that looks roughly like this:

import { renderToString } from "solid-js/web"

...

const htmlString = renderToString(() => (
  <PageComponent />
))

import { renderToString } from "solid-js/web"

...

const htmlString = renderToString(() => (
  <PageComponent />
))

How can I run this in node? What configuration, etc., would I need?

8 replies

SSolidJS

•Created by foolswisdom on 1/16/2023 in #support

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!

12 replies

Gaming

Programming