🧩 Plasmo Developers•2w ago

Programmatically adding React components via createRoot + render gives "Invalid Hook Call" error

This really sucks. I want to be able to programmatically mount React components from my content script when I feel like it, but if I try to use createRoot and render from react-dom then I just get an Invalid hook call error. Here is my plasmo-inline.ts content script that I was using from the with-content-scripts-ui example:

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"
import TestComponent from "./TestComponent"
import { createRoot } from "react-dom/client"

export const config: PlasmoCSConfig = {
  matches: ["https://x.com/home"]
}

console.log('inside plasmo-inline')

const mainElement = document.querySelector('main')
const testComponentWrap = document.createElement('div')
testComponentWrap.id = 'test-component-wrap'
mainElement?.append(testComponentWrap)

const root = createRoot(testComponentWrap)
root.render(TestComponent())

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"
import TestComponent from "./TestComponent"
import { createRoot } from "react-dom/client"

export const config: PlasmoCSConfig = {
  matches: ["https://x.com/home"]
}

console.log('inside plasmo-inline')

const mainElement = document.querySelector('main')
const testComponentWrap = document.createElement('div')
testComponentWrap.id = 'test-component-wrap'
mainElement?.append(testComponentWrap)

const root = createRoot(testComponentWrap)
root.render(TestComponent())

Then when I try to use the following component (TestComponent.tsx):

import { useState } from "react"

console.log('inside TestComponent')

const TestComponent = () => {
    const [something, setSomething] = useState(false)
    return (
      <div>
        TestComponent
      </div>
    )
  }
  
export default TestComponent

import { useState } from "react"

console.log('inside TestComponent')

const TestComponent = () => {
    const [something, setSomething] = useState(false)
    return (
      <div>
        TestComponent
      </div>
    )
  }
  
export default TestComponent

I get this error:

react.development.js:211 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:211 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Anyone know how to get around this?

1 Reply

Kylan HurtOP•2w ago

And then if I change the plasmo-inline.ts file to a .tsx file and use TestComponent as JSX (<TestComponent />`) then I end up with even more errors:

Gaming

Programming

Programmatically adding React components via createRoot + render gives "Invalid Hook Call" error