Invalid Hook Call Error when Creating Custom Integration Tab for Spotlight
Opened this issue · 4 comments
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
- 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
![image](https://private-user-images.githubusercontent.com/5575082/300156996-c95d265f-e815-4dd6-88a0-5ace7d321b8f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4ODA0NjYsIm5iZiI6MTcxOTg4MDE2NiwicGF0aCI6Ii81NTc1MDgyLzMwMDE1Njk5Ni1jOTVkMjY1Zi1lODE1LTRkZDYtODhhMC01YWNlN2QzMjFiOGYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDJUMDAyOTI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDMzYTEyNDA2Y2U0NzM3ZTQxZWM3NGMxODhmMjA1NzNjYjIzMWQwZDRlYWE3Y2ViYmFkZjdiMzM2MDBiZDAxYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.zHbc-XA0EqDQ--UflFxbOgrOd48qDVkeMtJBXwoBHXc)
Hi @DanSnow can you please share the steps you used? need some more context to check what goes wrong.
Thanks
Hi @Shubhdeep12 ,
I've created a minimal reproduction at https://github.com/DanSnow/spotlight-custom-integration-issue.
Reproduction Steps:
- Clone this repo.
- Run 'yarn install'.
- Run 'yarn dev'.
- 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.
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.
Anyway to work around this in the short term?
Edit: was able to work around by using class components