[BUG] Cannot programatically / arbitrarily mount React components whenever I'd like

[smilingkylan]

What happened?

[I also posed this question in the Plasmo Discord but it doesn't seem like many questions get answered on there, unfortunately]

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())

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

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.

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:

Anyone know how to get around this? Can we not arbitrarily mount React components when we'd like? If not, then why not? I want to be able to import React components into content scripts whenever I'd like, and mount them...

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

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.

### (OPTIONAL) Contribution

- [ ] I would like to fix this BUG via a PR

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct
- [X] I checked the [current issues](https://github.com/PlasmoHQ/plasmo/issues?q=is%3Aopen+is%3Aissue+label%3Abug) for duplicate problems.