I assume this is a bit of a niche scenario, but I thought it would be worth bringing it up. Right now I have a slightly convoluted setup. I have another React project that I wanted to reuse some components I already had in the extension, so in order for that to work I had to

npm link

both

react

and

react-dom

(otherwise it would throw hook errors due to being different instances), and everything worked fine that way. I've wanted to make it a more permanent solution, so rather than manually linking them I changed the

package.json

definition of both libraries and used a relative file import that pointed at them instead. In theory this should be the same, but now the extension refuses to work due to the following error:

ranker-overlay.tsx:85 Uncaught (in promise) ReferenceError: React is not defined

The error comes from the generated

contents

file inside

.plasmo/static

, and I believe it has something to do about how you've set it up because that file doesn't seem to be importing react for jsx, just some hooks. Do you have any further idea about what could be going on here?

What framework are you using for your other app? Plain CRA? Technically, the react instance should be totally separated bc browser extension and webapp should be separated. We bundle the components for plasmo so you shouldn't import any react component you have export default with plasmo

You can also just setup a common design system component library and share them between the extension and your app