执行npm run dev时Vite+React项目出现意外令牌错误

错误信息 #

执行npm run dev后出现以下错误：

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

以及：

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

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

相关文件内容 #

package.json #

{
  "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"
  }
}

Header.jsx #

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;

vite.config.js #

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

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

问题原因 #

1. JSX语法不支持HTML的<!-- -->注释格式，Babel解析时会将其识别为无效token，导致报错。
2. Header.jsx中style属性使用了字符串写法，而JSX要求style必须是对象格式，这是潜在的语法问题。

解决方法 #

1. 替换JSX中的注释格式 #

将所有<!-- 注释内容 -->替换为JSX专用注释{/* 注释内容 */}。

2. 修正style属性写法 #

把style的字符串内容转为JavaScript对象，属性名改为驼峰式（比如background-position改为backgroundPosition）。

修正后的Header.jsx示例 #

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={{
                    backgroundPosition: '50%',
                    backgroundImage: "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={{ backgroundColor: '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;

修改完成后重新执行npm run dev即可正常启动项目。

内容的提问来源于stack exchange，提问作者WaqasRaza