issue with react router course

[void nebula]

when i save code after i click on about it does this

[quasi gazelle]

I don't understand what is happening?

[void nebula]

when i hit ctrl+s it shows code in the browser

[quasi gazelle]

ah now I see. Link to scrim?

[void nebula]

https://scrimba.com/scrim/c9LeGmuR

[quasi gazelle]

I just checked the scrim and even if I see the native code in the preview when it first loads, if you then go to "/" route (which is the home) and click on about, it renders correctly... maybe it was just a glitch?
That looked very much like server-side rendered jsx

[void nebula]

I'm still having that issue in that particular scrim

it's working fine in other scrim tysm!

[quasi gazelle]

Oh, I didn't do anything, but I'm glad you solved it. Sometimes the errors just go away like that 😉

[void nebula]

haha

[kindred thistle]

The reason you were having the issue is because react and imports work weird when you have your file names for your components start with lower case letters. If you change your file name from about.jsx to About.jsx and import it in your index.jsx file as import About from './About' it will fix this issue. Change the file name and the import before clicking run on the scrimba browser and it should work. I think the scrim is a little weird when it comes to editing imports and file names. I don't know how accurate the statement is, but I do believe they are using some kind of webpack configuration or some other bundler for script bunding in react, in which case it may be looking for a component with a capital letter from it's import and not finding it. Hince the strange browser output.

[royal cliff]

Yes, indeed! It's capital letters are common conventions to use for JSX and React. If the file start with lowercase the content will be treated as a string hence the weird behaviour. Funnily enough, the behaviour is actually completely correct based on the logic behind it 😂

[quasi gazelle]

@kindred thistle @royal cliff thanks for this info, I didn't know lowercase file names could cause such an issue! 💯

[royal cliff]

I heard vite is being configured under the hood, not webpack. At least for the latest projects, I am not certain this is the case for older courses/project.

[void nebula]

Thank you so much

[kindred thistle]

I think Vite uses rollup from what i understand. But I have to imagine it's the same concept. I think the way they bundle is still fundamentally the same even if there are variations.

[kindred thistle]

No problem!