Invalid Hook Call Error when Creating Custom Integration Tab for Spotlight

[DanSnow]

I am trying to create a custom integration tab for Spotlight. However, Spotlight bundles React into its code, causing me to encounter an "invalid hook call" error whenever I use a React component that utilizes hooks.

Environment

"@spotlightjs/spotlight": "1.2.7"

Steps to Reproduce

1. make a simple integration plugin with component like

 function TabContent () {
    useEffect(() => { console.log('test') }, [])
    return <div />
 }

Expected Result

Successfully create an integration tab

Actual Result

[Shubhdeep12]

Hi @DanSnow can you please share the steps you used? need some more context to check what goes wrong.
Thanks

[DanSnow]

Hi @Shubhdeep12 ,

I've created a minimal reproduction at https://github.com/DanSnow/spotlight-custom-integration-issue.

Reproduction Steps:

1. Clone this repo.
2. Run 'yarn install'.
3. Run 'yarn dev'.
4. Open the page.

Expected Result:
The Spotlight button displays normally.

Actual Result:
It does not display, and there is an 'invalid hook' error in the console.

[dcramer]

I'm wondering if its simple to re-export react here (though that feels dirty). Alternatively we'll have to provide some way to swap out the underlying react implementation. I'm not entirely sure what'd be cleanest here, or if theres some prior art of other folks trying to sandbox react in the same way we are.

[MisterJimson]

Anyway to work around this in the short term?

Edit: was able to work around by using class components