How to Fix React Project Deployment Issues on cPanel / Node.js

If you’re working on a React admin dashboard project like perfume-admin-panel and facing build or deployment issues, this guide will help you solve them step by step.

 Problem Overview

Common issues when deploying React projects:

• Error: ENOENT: no such file or directory, stat ‘build/index.html’
  → Build folder or index.html missing.
• Attempted import error: ‘Navigate’ is not exported from ‘react-router-dom’
  → React Router version mismatch.
• Node.js v20+ OpenSSL errors while building:

   error:0308010C:digital envelope routines::unsupported
  

• React Router URLs not working on cPanel ( Not Found on main domain).

 Check Your Dependencies

Make sure your package.json contains the correct versions:

"dependencies": {
  "react": "^18.x",
  "react-dom": "^18.x",
  "react-router-dom": "^6.30.2",
  "@supabase/supabase-js": "^2.x",
},
"devDependencies": {
  "react-scripts": "^5.0.1",
  "tailwindcss": "^4.x",
  "autoprefixer": "^10.x"
}
 

Important: Remove conflicting packages like next if you are using react-scripts to build a CRA-style project.

npm uninstall next
 

 Fix React Router Issue

Problem: Navigate not exported from react-router-dom .

Solution: Ensure you are using React Router v6, where Navigate is available.

• Check version:

npm list react-router-dom

• If not v6, install v6:

npm uninstall react-router-dom
npm install react-router-dom@6

• Now your AppRouter.jsx can safely use:

import { BrowserRouter, Routes, Route, Navigate, Outlet } from "react-router-dom";

 Fix Node.js OpenSSL Build Error

When building on Node v17+ / v20+, you may get:

 error:0308010C:digital envelope routines::unsupported

Fix: Set the environment variable:

export NODE_OPTIONS=--openssl-legacy-provider

Then run the build command:

npm install
npm run build

• This generates the build/ folder with index.html .

 Deploy Build to cPanel

1. Upload the contents of the build/ folder to public_html (or a subfolder).
2. Add .htaccess for React Router support:

 Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

• This ensures routes like /products , /orders , /ads work correctly.

 Start / Serve the App Locally

If you want to test locally:

npm install
export NODE_OPTIONS=--openssl-legacy-provider
npm run build
npx serve -s build
 

• This serves your React app on localhost:5000 by default.

Summary of Commands That Fixed Everything

# 1. Remove conflicting Next.js dependency
npm uninstall next

# 2. Install react-scripts if missing
npm install react-scripts --save-dev

# 3. Set Node.js legacy OpenSSL mode
export NODE_OPTIONS=--openssl-legacy-provider

# 4. Install dependencies
npm install

# 5. Build the project
npm run build

After these steps:

• build/index.html exists
• React Router v6 works ( Navigate component OK)
• Node/OpenSSL errors are gone
• App can be deployed on cPanel with .htaccess

Conclusion

By removing Next.js, fixing Node.js OpenSSL errors, ensuring react-router-dom v6, and properly building the project, you can deploy your perfume-admin-panel React app without errors.