使用npm create vite创建React项目时遇Class extends错误求助

以下是针对该错误的几种可行解决方案：

• 清理npm缓存
  缓存损坏可能导致这类异常，执行命令清理后重试：

  npm cache clean --force
  

  清理完成后再次运行原创建命令。

• 改用npx直接调用vite
  绕过npm本地缓存的版本冲突问题，直接使用npx拉取最新vite包执行：

  npx vite@latest my-first-react-app --template react
  

• 确认Node.js版本兼容性
  Vite 5.x要求Node.js版本≥18.0.0，执行node -v查看当前版本，若低于18，升级至LTS稳定版（如20.x）后重试。

• 手动初始化React项目（终极方案）
  如果上述方法都无效，手动搭建项目环境：

  1. 创建并进入项目文件夹：

     mkdir my-first-react-app && cd my-first-react-app
     

  2. 初始化npm项目：

     npm init -y
     

  3. 安装依赖：

     npm install vite @vitejs/plugin-react react react-dom
     

  4. 在根目录创建vite.config.js：

     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     
     export default defineConfig({
       plugins: [react()],
     })
     

  5. 修改package.json的scripts字段：

     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "preview": "vite preview"
     }
     

  6. 创建根目录index.html：

     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>React App</title>
       </head>
       <body>
         <div id="root"></div>
         <script type="module" src="/src/main.jsx"></script>
       </body>
     </html>
     

  7. 创建src文件夹及核心文件：
     • src/main.jsx：

       import React from 'react'
       import ReactDOM from 'react-dom/client'
       import App from './App.jsx'
       import './index.css'
       
       ReactDOM.createRoot(document.getElementById('root')).render(
         <React.StrictMode>
           <App />
         </React.StrictMode>,
       )
       

     • src/App.jsx：

       function App() {
         return (
           <div className="App">
             <h1>Hello React</h1>
           </div>
         )
       }
       
       export default App
       

     • src/index.css：

       * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
       }
       
       body {
         font-family: Arial, sans-serif;
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
       }
       

  完成后执行npm run dev即可启动开发服务器。

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