Vite Build Failing With React

Contents hide

Problem Description:

getting this error when i run npm run dev

 Plugin: vite:react-babel
  File: /components/Header.jsx:7:13
  5  |      return(
  6  |          <header>
  7  |              <!-- Navbar -->
     |               ^
  8  |              <Navbar />
  9  |              <!-- Navbar -->

and

components/Header.jsx: Unexpected token (7:13)

   5 |     return(
   6 |         <header>
>  7 |             <!-- Navbar -->

here is package.json file

{
  "name": "name",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "tailwindcss": "^3.2.4",
    "vite": "^3.2.3"
  }
}

here is my header.jsx file

import React from "react";
import Navbar from "./Navbar.jsx";

const Header = (props) => {
    return(
        <header>
            <!-- Navbar -->
            <Navbar />
            <!-- Navbar -->

            <!-- Background image -->
            <div className="relative overflow-hidden bg-no-repeat bg-cover" style="
    background-position: 50%;
    background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/146.webp');
    height: 350px;
  ">
                <div className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
                     style="background-color: rgba(0, 0, 0, 0.75)">
                    <div className="flex justify-center items-center h-full">
                        <div className="text-center text-white px-6 md:px-12">
                            <h1 className="text-5xl font-bold mt-0 mb-6">Heading</h1>
                            <h3 className="text-3xl font-bold mb-8">Subeading</h3>
                            <button type="button"
                                    className="inline-block px-6 py-2.5 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
                                    data-mdb-ripple="true" data-mdb-ripple-color="light">
                                Get started
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Background image -->
        </header>
    )
}

export default Header;

here is my vite config file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

Solution – 1

HTML comments cannot be used in JSX. The right syntax for commenting should be

return (
    <header>
        {/* Navbar */}
        <Navbar />
        {/* Navbar */}

        ...

The standard HTML causes errors because it is parsed while rendering the component.

Solution – 2

Although JSX uses something very similar to html it is still JS so the comment must be enclosed in {}

In your Header.jsx Change your line 7 and 9 to

{/* Navbar (Or your comment)*/}

You can read more on the foolowing websites:

https://pt-br.reactjs.org/docs/introducing-jsx.html

https://www.folkstalk.com/2022/09/how-to-comment-out-code-in-react-js-with-code-examples-2.html

If you are using the VSCode, you can press Ctrl + /

Rate this post