createRootContainer returns null

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
createRootContainer
}) => {
const rootContainer = await createRootContainer()
if (!rootContainer) return console.error("Root container not found")
const root = createRoot(rootContainer)
root.render(<CustomButton />)
}
export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
createRootContainer
}) => {
const rootContainer = await createRootContainer()
if (!rootContainer) return console.error("Root container not found")
const root = createRoot(rootContainer)
root.render(<CustomButton />)
}
In the above code, createRootContainer returns null. Any idea what could be causing this? I have my own export const getRootContainer defined and even document.querySelector('body') produces the same result
export const getRootContainer = () => {
new Promise((resolve) => {
const selector = "ul[data-test-id='ticket-editor-app-icon-view']"

if (document.querySelector(selector)) {
const rootContainerParent = document.querySelector(selector)
const rootContainer = document.createElement("li")
rootContainerParent.appendChild(rootContainer)
return resolve(rootContainer)
}

const observer = new MutationObserver((mutations) => {
if (document.querySelector(selector)) {
const rootContainerParent = document.querySelector(selector)
const rootContainer = document.createElement("li")
rootContainerParent.appendChild(rootContainer)
resolve(rootContainer)
observer.disconnect()
}
})

observer.observe(document.body, {
childList: true,
subtree: true
})
})
}
export const getRootContainer = () => {
new Promise((resolve) => {
const selector = "ul[data-test-id='ticket-editor-app-icon-view']"

if (document.querySelector(selector)) {
const rootContainerParent = document.querySelector(selector)
const rootContainer = document.createElement("li")
rootContainerParent.appendChild(rootContainer)
return resolve(rootContainer)
}

const observer = new MutationObserver((mutations) => {
if (document.querySelector(selector)) {
const rootContainerParent = document.querySelector(selector)
const rootContainer = document.createElement("li")
rootContainerParent.appendChild(rootContainer)
resolve(rootContainer)
observer.disconnect()
}
})

observer.observe(document.body, {
childList: true,
subtree: true
})
})
}
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server