1 reply

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

createRoot

createRoot

createRoot and

render

render

render

render from

react-dom

react-dom

react-dom

react-dom then I just get an

Invalid hook call

Invalid hook call

Invalid hook call

Invalid hook call error.

Here is my

plasmo-inline.ts

plasmo-inline.ts

plasmo-inline.ts

plasmo-inline.ts content script that I was using from the

with-content-scripts-ui

with-content-scripts-ui

with-content-scripts-ui

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

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

TestComponent.tsx

TestComponent.tsx

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

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.

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?

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

Similar Threads

Similar Threads

Similar Threads