I see duplicated components in my Dev Tools in the Source Panel using Vite + React

Issue

enter image description here

I'm new to React and I'm using Vite to install it. Everything was working fine until I noticed when I opened my Dev Tools and navigated to the Source Panel and looked for my code, I saw all my components duplicated. I also noticed that they have (from source map) next to it and the other is from localhost.

I'm not sure if this should be the expected behavior or if I am doing something wrong. Can someone explain why is doing that?

I tried to create a new React file with Vite and even the default App has duplicate. I kind of think that this is the way Vite to configured but still wondering if is something wrong on my end

Solution

I just found the cause of the issue. It was actually about the sourcemap that is only available on the localhost. When the website/app is deployed, the duplicates are no longer visible. Although, if you wanna hide them on your Dev Tools you can hide them by uncheck the "Source Map" in the Debugger Panel in Mozila Browser from the upper right wheel icon settings.

I haven't tried this on Google Chrome, but I'm assuming is something similar

Answered By - Elyticus