安装Tailwind CSS Forms后React本地服务器启动失败求助

错误原因 #

Node.js 17及以上版本默认采用OpenSSL 3.0，而你项目中使用的旧版Webpack（create-react-app内置版本）不支持其新的哈希算法，导致启动失败。

解决方案 #

方法1：临时添加环境变量（快速修复） #

修改项目根目录下package.json中的start脚本，添加NODE_OPTIONS=--openssl-legacy-provider：

• macOS/Linux/WSL：

  "scripts": {
    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• Windows（CMD）：

  "scripts": {
    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• Windows（PowerShell）：

  "scripts": {
    "start": "$env:NODE_OPTIONS='--openssl-legacy-provider'; react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

修改后重新运行npm start即可。

方法2：降级Node.js到16.x LTS（长期稳定方案） #

使用Node版本管理器（nvm）快速切换版本：

1. 安装nvm（如果未安装）
2. 运行以下命令：

   nvm install 16
   nvm use 16
   

之后重新启动开发服务器即可。

方法3：更新create-react-app到最新版本 #

新版create-react-app已修复该兼容问题，运行命令更新：

npm install react-scripts@latest
# 或使用yarn
yarn add react-scripts@latest

更新完成后重新运行npm start。

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