Component not rendering

JavaScript
1

Hello there!

I have been trying to render this component without much success. I have re-checked my files and they’re fine, unless I am missing something. Here is the code, I’ll appreciate some help.

Component code

import React from "react";
import styles from './styles.module.css'

function Landing() {
    return(
    <nav className={styles.nav}>
      <header>Game Wave</header>
  
      <ul>
          <li>Login</li>
          <li>Cart</li>
          <li>Contacts</li>
      </ul>
    </nav>
    );
  }

export default Landing;

Entry point code.

import React from "react";
import { createRoot } from "react-dom/client";
import Landing from "./Landingpage"; 


const root = createRoot(document.getElementById("root"));
root.render(<Landing />);

Here is how my files are arranged.

Screenshot 2025-03-03 185814
Screenshot 2025-03-03 185814316×487 11 KB

2

Does it work if you rename your main file with the jsx extension.

main.jsx

Does Vite not give you an error?

3

I had that initially but it didn’t work as well. Vite cannot find the Landingpage.jsx, but the file path seems to be ok.

4

Your code works for me as long as I rename the main file.

How did you use Vite to set up the React project?

What does your vite.config.js file look like?

I would suggest you post a repo so we can test it.

5

Thank You. I managed it. I renamed the file using the jsx extension, moved the assets file, and re-ran the dev environment.