Issues with React due to referenceError
# support-framework
f
Issues with React due to referenceError
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:
Copy code
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?
l
The typescript configuration plays a role in here as well
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
5 Views