Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Erick Luna
20,934 PointsError in console when I call render using JSX tag
When I call the root.render() method passing a JSX tag named as the arrow function (in this case <Header />) I see an error in the console like this: [vite] hmr invalidate /src/main.jsx Could not Fast Refresh. What could be the issue in this case? Thank you in advance for the help! :)
1 Answer
Rohald van Merode
Treehouse StaffHi Erick Luna 👋
This is not an error but a warning and is therefor safe to ignore, especially at this stage or the course 🙂 Along with the error there's a link where you can read more about Consistent Component Exports.
Basically what it means is that, in order for the HMR (Hot Module Reloading) to work you'll want your files to only export a React component. Behind the scenes Vite will then ensure that only that specific file is being reloaded instead of multiple files that haven't been edited. Making sure that the reloading of the app works as fast as possible and doesn't reload unedited things that were already loaded before. In this specific video there's no component being exported, which causes it to warn you about it not being able to "Fast Refresh".
Hope this clears things up! 🙂
Happy Coding! 🧑💻
Erick Luna
20,934 PointsErick Luna
20,934 PointsThis answer makes very clear what is happening, thank you Rohald van Merode !