使用create-next-app@latest创建React项目陷入加载死循环求助

针对你在Ubuntu 22.04、Node.js v22.5.0环境下创建React应用长期加载的问题，试试以下几种方案：

1. 切换npm镜像源 #

国内网络环境下，默认npm源下载速度慢是常见问题，切换到国内镜像：

npm config set registry https://registry.npmmirror.com

之后重新执行创建命令：

npx create-react-app my-app

2. 用pnpm/yarn配合Vite工具链替代旧方案 #

create-react-app已被官方标记为废弃，Vite是当前推荐的高效构建工具，配合pnpm可大幅提升依赖下载速度：

• 安装pnpm：

npm install -g pnpm

• 创建React项目：

pnpm create vite@latest my-app --template react

进入项目后安装依赖并启动：

cd my-app
pnpm install
pnpm dev

3. 清理npm缓存 #

缓存损坏可能导致安装异常，强制清理缓存后重试：

npm cache clean --force

4. 临时禁用SSL验证（针对证书类网络问题） #

如果是网络SSL证书导致的下载阻塞，可临时禁用验证：

npm config set strict-ssl false

完成安装后记得恢复安全验证：

npm config set strict-ssl true

5. 手动搭建React项目（绕过自动创建工具） #

如果上述方法都无效，手动搭建基于Vite的React项目：

1. 创建项目目录并初始化npm：

mkdir my-react-app && cd my-react-app
npm init -y

2. 安装依赖：

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

3. 创建配置文件vite.config.js：

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

export default defineConfig({
  plugins: [react()],
})

4. 创建根目录的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>

5. 创建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;
  text-align: center;
  padding-top: 50px;
}

6. 修改package.json的scripts：

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

7. 启动项目：

npm run dev

内容的提问来源于stack exchange，提问作者Emiliano Della Ciana