🧩 Plasmo Developers•4mo ago

Overriding the default renderer

I'm trying to override the default renderer so I can use a custom mutation observer (clicking on next page on the SPA does a scroll to top so I want to wait for it to finish to stop 10 components all requesting data at once). When using an inline anchor, I can see the anchor appearing with a type of inline, but the createContainer seems to throw an exception with: TypeError: Cannot read properties of undefined (reading 'type'). When using an inline anchor list I can't see anything being logged to the console. Am I doing something wrong for this type error to appear even though the anchor seems to have a type? How do I override the default renderer for an inline anchor list?

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => document.querySelector<HTMLElement>('query');

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => document.querySelectorAll<HTMLElement>('another query');

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async (
  {
    anchor,
    createRootContainer
  },
  _,
  InlineCSUIContainer
) => {
  // Nothing is logged when using a page with matching getInlineAnchorList results.
  // Starts the render for getInline anchor results but throws a type error.

  console.log('Creating root container');
  console.log(anchor); // anchor appears and has a type of inline
  const rootContainer = await createRootContainer();
  // Exception thrown: TypeError: Cannot read properties of undefined (reading 'type')
  
  console.log('About to create the root');
  const root = createRoot(rootContainer);
  root.render(
    <InlineCSUIContainer anchor={anchor}>
      <CustomUi anchor={anchor} />
    </InlineCSUIContainer>
  );
};

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => document.querySelector<HTMLElement>('query');

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => document.querySelectorAll<HTMLElement>('another query');

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async (
  {
    anchor,
    createRootContainer
  },
  _,
  InlineCSUIContainer
) => {
  // Nothing is logged when using a page with matching getInlineAnchorList results.
  // Starts the render for getInline anchor results but throws a type error.

  console.log('Creating root container');
  console.log(anchor); // anchor appears and has a type of inline
  const rootContainer = await createRootContainer();
  // Exception thrown: TypeError: Cannot read properties of undefined (reading 'type')
  
  console.log('About to create the root');
  const root = createRoot(rootContainer);
  root.render(
    <InlineCSUIContainer anchor={anchor}>
      <CustomUi anchor={anchor} />
    </InlineCSUIContainer>
  );
};

1 Reply

cheesestringerOP•4mo ago

Created an issue to track it https://github.com/PlasmoHQ/plasmo/issues/1046

GitHub

[BUG] Overriding the default render fails when using the built in I...

What happened? Following the docs at https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#renderer to override the default render using the built in Inline Container or overlay Container...

Gaming

Programming

Overriding the default renderer