🧩 Plasmo Developers•2y ago

Type error on CSUI

I copied and pasted the example (https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer) of the docs and it's throwing errors. Anyone knows how to fix? (ignore the component error, it does not exist)

Plasmo Docs

Life Cycle of Plasmo CSUI – Plasmo

Plasmo's CSUI orchestrates a lifecycle dedicated to mounting and unmounting your React, Vue, or Svelte components in a content script.

8 Replies

lab•2y ago

Whoops, that's a bug in the typing and also within the docs @Mael just released 0.69.2 and also the docs update, pls check them out and lmk if it still doesn't work! Basically:

import type { PlasmoRender } from "plasmo"

const AnchorOverlay = ({ anchor }) => <span>{anchor.innerText}</span>

export const render: PlasmoRender = async (
  {
    anchor, // the observed anchor, OR document.body.
    createRootContainer // This creates the default root container
  },
  _,
  OverlayCSUIContainer
) => {
  const rootContainer = await createRootContainer()

  const root = createRoot(rootContainer) // Any root
  root.render(
    <OverlayCSUIContainer>
      <AnchorOverlay anchor={anchor} />
    </OverlayCSUIContainer>
  )
}

import type { PlasmoRender } from "plasmo"

const AnchorOverlay = ({ anchor }) => <span>{anchor.innerText}</span>

export const render: PlasmoRender = async (
  {
    anchor, // the observed anchor, OR document.body.
    createRootContainer // This creates the default root container
  },
  _,
  OverlayCSUIContainer
) => {
  const rootContainer = await createRootContainer()

  const root = createRoot(rootContainer) // Any root
  root.render(
    <OverlayCSUIContainer>
      <AnchorOverlay anchor={anchor} />
    </OverlayCSUIContainer>
  )
}

MaelOP•2y ago

@louis Upgraded the version. Still getting the errors tho 🤔

lab•2y ago

restart the ts server too

MaelOP•2y ago

lol, restarting VSCode worked. Thank you so much!

MaelOP•2y ago

@louis just FYI I'm getting this error now

Arcane•2y ago

@Mael has reached level 2. GG!

MaelOP•2y ago

also getting this unless I send the anchor down to the OverlayCSUIContainer component. anchor is still the html element and not the result of the getOverlayAnchor function (not sure if this is intended or not)

lab•2y ago

Ooh yeah - you need to send the anchor down as a props otherwise the built-in container will not work I think they are the same error, will update the docs on that as well

Gaming

Programming

Type error on CSUI