How to fix Failed to load config from vite.config.ts: error:0308010C:digital envelope routines::unsupported in React

Set the NODE_OPTIONS environment variable to use the legacy OpenSSL provider:

Linux/macOS:

export NODE_OPTIONS=--openssl-legacy-provider
npm run dev

Windows (Command Prompt):

set NODE_OPTIONS=--openssl-legacy-provider
npm run dev

Windows (PowerShell):

$env:NODE_OPTIONS="--openssl-legacy-provider"
npm run dev

Permanent solution in package.json:

{
  "scripts": {
    "dev": "NODE_OPTIONS=--openssl-legacy-provider vite",
    "build": "NODE_OPTIONS=--openssl-legacy-provider vite build"
  }
}

For cross-platform compatibility, use the cross-env package:

npm install --save-dev cross-env

{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider vite",
    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider vite build"
  }
}

This re-enables the legacy algorithms that were removed in OpenSSL 3.0.

If you're on Node.js v17 or v18, upgrade to the latest LTS version (Node.js 20+):

# Check current version
node --version

# Using nvm (recommended)
nvm install --lts
nvm use --lts

# Or download from nodejs.org
# https://nodejs.org/

Newer Node.js versions include better compatibility handling and updated build tools have adapted to OpenSSL 3.0 changes.

After upgrading, clean install dependencies:

rm -rf node_modules package-lock.json
npm install

Upgrade Vite and related build tools to versions that support Node.js v17+:

# Update Vite to latest version
npm install vite@latest --save-dev

# Update all build-related dependencies
npm update esbuild webpack @vitejs/plugin-react

Check your package.json for minimum recommended versions:
- Vite 3.0.0+ (better yet, 4.0.0+)
- esbuild 0.15.0+
- webpack 5.0.0+ (if used)

After updating:

rm -rf node_modules package-lock.json
npm install
npm run dev

Ensure your vite.config.ts uses proper ESM syntax and TypeScript configuration:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

Check package.json has proper module configuration:

{
  "type": "module"
}

If not using "type": "module", rename to vite.config.mts:

mv vite.config.ts vite.config.mts

The .mts extension explicitly marks the file as an ES module.

If you need an immediate fix and can't update dependencies, downgrade to Node.js v16:

# Using nvm
nvm install 16
nvm use 16

# Verify version
node --version  # Should show v16.x.x

# Clean install
rm -rf node_modules package-lock.json
npm install

Warning: Node.js v16 reached end-of-life in September 2023. This is only a temporary solution while you plan to update your dependencies. Do not use this approach for production deployments.