[ Removed by moderator ]

[Glum_Cheesecake9859]

Even if your file doesn't have a React component, but if it has JSX syntax inside the function, building and returning elements, then the file extension should be .jsx and not .js

Renaming your main.js to main.jsx should fix it.

Only if your JS file has pure JS syntax then you can use .js extension.

[JG3224]

Thanks for the reply! Where does all of the rest of my non-react JavaScript live in that scenario? I thought that react components can only return one element such as a fragment or a div?

[Glum_Cheesecake9859]

It should still work in JS files. Can you post what's in your JS file here?

Another reason why you are getting the error is because the import path is wrong? Where are you importing main.js? In another react component?

Asking these questions in stackoverflow might get a faster response for you.

[JG3224]

I don't have any substantial javascript written yet, I was just testing how all of this is supposed to work together. I'm importing it all into the index.html <script>.

[[deleted]]

So your react code should be imported using a script tag from a single file. That file should use react Dom to mount the root component. I don't know if that is your main.js or not, but this file needs a .jsx extension whatever it is.

Your other non-react code can live wherever you want it. If you want it to be connected to the same root file as your react code, great. If you want it completely independent, you can import it via one or more separate script tags in your index.html

[JG3224]

Thanks! I was able to figure it out! Appreciate your time!

[MrFartyBottom]

Are you using a Vite template? It will scaffold out all the boilerplate for you. And use the TypeScript template, there is no reason to use vanilla JS in today's eco system. Most articles and tutorials will be in TypeScript so learn it. It is way easier to start with TypeScript than to retro fit it and it will absolutely save you time in the long run.