Node v20.9.0下npx create-react-app失效，如何不依赖Next.js/Expo用React？

你遇到的MaxListenersExceededWarning是create-react-app依赖工具在Node v20下的兼容性问题，且官方已停止维护create-react-app，不推荐长期使用，但仍有多种方式可以继续使用纯React：

1. 用Vite快速搭建React项目 #

Vite是当前主流的前端构建工具，对Node v20支持完善，步骤简洁：

• 执行初始化命令：npm create vite@latest
• 按提示选择React或React + TypeScript模板
• 进入项目目录安装依赖：npm install
• 启动开发服务器：npm run dev
  该方式构建速度快、配置灵活，完全基于纯React，无需额外框架。

2. 手动配置Webpack + React #

若需要完全自定义项目配置，可手动搭建：

• 创建空目录并初始化npm：npm init -y
• 安装核心依赖：npm install react react-dom
• 安装开发依赖：npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin
• 在项目根目录创建babel.config.json配置Babel：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

• 创建webpack.config.js配置构建规则：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    hot: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

• 创建src/index.js和public/index.html基础文件后，启动开发服务器：npx webpack serve

3. 临时降级Node版本（不推荐长期使用） #

如果只想继续用create-react-app，可临时将Node版本降级到v18（LTS版本），用nvm管理版本更便捷：

• 安装nvm后执行：nvm install 18
• 切换版本：nvm use 18
• 再运行npx create-react-app即可避免警告，但因create-react-app已停止维护，长期使用存在风险。

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