Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Overriding the default render fails when using the built in InlineCSUIContainer or OverlayCSUIContainer #1046

Open
2 of 3 tasks
cheesestringer opened this issue Aug 7, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@cheesestringer
Copy link

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 fails with the error: Cannot read properties of undefined (reading 'type') at injectAnchor (csui.ts:58:14).

To reproduce create a new content ui script with an InlineCSUIContainer or OverlayCSUIContainer.

InlineCSUIContainer:

import type {
  PlasmoCSConfig,
  PlasmoCSUIJSXContainer,
  PlasmoRender
} from "plasmo"
import { createRoot } from "react-dom/client"

export const config: PlasmoCSConfig = {
  matches: ["https://*/*"]
}

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

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async (
  { anchor, createRootContainer },
  _,
  InlineCSUIContainer
) => {
  const rootContainer = await createRootContainer()

  const root = createRoot(rootContainer)
  root.render(
    <InlineCSUIContainer anchor={anchor}>
      <InlineDemo anchor={anchor} />
    </InlineCSUIContainer>
  )
}

export default InlineDemo 

OverlayCSUIContainer:

import type {
  PlasmoCSConfig,
  PlasmoCSUIJSXContainer,
  PlasmoRender
} from "plasmo"
import { createRoot } from "react-dom/client"

export const config: PlasmoCSConfig = {
  matches: ["https://*/*"]
}

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

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async (
  { anchor, createRootContainer },
  _,
  OverlayCSUIContainer
) => {
  const rootContainer = await createRootContainer()

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

export default OverlayDemo 

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Microsoft Edge

Relevant log output

Uncaught (in promise) 
TypeError: Cannot read properties of undefined (reading 'type')
    at injectAnchor (csui.ts:58:14)
    at createShadowContainer (csui.ts:74:3)
    at async Object.render (demo.tsx:35:15)

(OPTIONAL) Contribution

  • I would like to fix this BUG via a PR

Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I checked the current issues for duplicate problems.
@cheesestringer cheesestringer added the bug Something isn't working label Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant