React.jsx: type is invalid.
Hey! Recently converted an extension I was developing from custom React to Plasmo + React. I have a contents folder with VideoBadge.tsx(the main component that gets mounted into pages) + a components folder where I store all the components for VideoBadge. The thing is that when I edit something inside the components folder and reload, this always happens. Everything works fine but this error appears
21 Replies
After some digging its kind of trying to render 2 content elements even though there is only one in the root of contents
Is this a bug or how can I fix that?
Are you manually mounting your react root?
if so, you should use the
ts file extension instead. With the tsx extension, Plasmo mount it all for you via the CSUI featurePlasmo Docs
Migrate to Plasmo Framework – Plasmo
A guide on migrating to Plasmo from any browser extension setup.
See this docs for more info on migrating to Plasmo
My contents folder looks like this:
-contents
-VideoBadge.tsx
-components
But somehow whenever I change some code on the components folder with the dev server(hmr) enabled, Plasmo will try to mount that component independently, which should not happen since it is not in the root of /components/ if I am not mistaken @louis
@davidgm has reached level 1. GG!
If I restart the server everything works fine, but its annoying
Oh, any files residing in contents are treated as entry files
You should move any file that you don't wish to be CS/CSUI outside contents
Then I think there might be a bug. Plasmo only tries to mount it(and gives an error since they are not really thought to be mounted that way) when I am on the dev server and edit them
If that condition is not met plasmo just mounts the component in the root of /contents but files inside folders do not get touched at all
What is the expected behaviour? Thanks for the help btw:)
are the stuff inside
/components also CSUI entries?Not really intended to. They are just regular 'export const whatever' React Components @louis
yeah you will need to relocate them
we dont' have colocation atm, observing nextjs transition to the app dir
Ok thanks:) but any idea on why it works fine as long as I dont edit their files while in dev server?
in dev server, we track them for reloading
in prod, they are just statically bundled
And even on production it works fine
yup, I would expect it to work as well if you don't export default anything from those comp
Yeah I dont
But it still tries to mount it and gets undefined of course(since it doesnt export default anything)
the dev server provides HMR, live-reloading as well as CSUI mount based on known entry directory, thus you might see error or duplicated mount. The idea of the
contents directory is parallel to the pages directory in nextjs
i.e, in nextjs's page directory, you might seen something similar too where an utils.tsx file wasn't supposed to be a page, but it get rendered anywayAlright
@davidgm has reached level 2. GG!
Thanks for explaining:)
Have a good day louis!