🧩 Plasmo Developers•14mo 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•14mo 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>
  )
}

Mael•14mo ago

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

lab•14mo ago

restart the ts server too

Mael•14mo ago

lol, restarting VSCode worked. Thank you so much!

Mael•14mo ago

@louis just FYI I'm getting this error now

Arcane•14mo ago

@Mael has reached level 2. GG!

Mael•14mo 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•14mo 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