# i18n Setup Guide for MinIO WebUI

This guide helps you set up the internationalization (i18n) dependencies for MinIO WebUI in different environments.

## Quick Fix

If you're getting errors about missing `react-i18next`, `i18next`, or `i18next-browser-languagedetector` modules:

### Option 1: Using the Install Script (Recommended)

```bash
cd frontend
./install-i18n.sh
```

### Option 2: Manual Installation

```bash
cd frontend
rm -rf node_modules package-lock.json
npm install --legacy-peer-deps
```

### Option 3: Docker Environment

If running in Docker, rebuild the frontend container:

```bash
docker-compose down frontend
docker-compose up -d --build frontend
```

## Troubleshooting

### Module Not Found Errors

If you see errors like:
- `Module not found: Error: Can't resolve 'react-i18next'`
- `Cannot find module 'i18next' or its corresponding type declarations`

**Solution:**
1. Delete `node_modules` and `package-lock.json`
2. Run `npm install --legacy-peer-deps`
3. If issues persist, install packages explicitly:
   ```bash
   npm install i18next@^23.7.6 react-i18next@^13.5.0 i18next-browser-languagedetector@^7.2.0 --legacy-peer-deps
   ```

### Peer Dependency Conflicts

Use the `--legacy-peer-deps` flag when installing to bypass peer dependency conflicts:

```bash
npm install --legacy-peer-deps
```

### TypeScript Declaration Errors

If TypeScript can't find type declarations, ensure you have the correct versions:
- i18next: ^23.7.6
- react-i18next: ^13.5.0
- i18next-browser-languagedetector: ^7.2.0

## Verifying Installation

After installation, verify the packages are installed:

```bash
npm list i18next react-i18next i18next-browser-languagedetector
```

You should see all three packages listed with their versions.

## Development Environment Setup

1. **Clone the repository**
2. **Navigate to frontend directory**: `cd frontend`
3. **Run the install script**: `./install-i18n.sh`
4. **Start the development server**: `npm start`

## Production Build

For production builds:

```bash
cd frontend
npm install --legacy-peer-deps
npm run build
```

## Docker Setup

The Dockerfile already includes the necessary dependencies. If you need to rebuild:

```bash
docker-compose build frontend
docker-compose up -d frontend
```

## Language Configuration

- Default language: German (de)
- Fallback language: English (en)
- Language selection is persisted in localStorage
- Language can be changed via the dropdown in the app header

## Translation Files Location

- German: `/frontend/src/locales/de/`
- English: `/frontend/src/locales/en/`

Each language has the following translation files:
- `common.json` - Navigation and common UI elements
- `dashboard.json` - Dashboard page translations
- `quickWizard.json` - Quick Start Wizard translations
- `reports.json` - Reports page translations
- `errors.json` - Error messages

## Need Help?

If you continue to experience issues:
1. Check that you're using Node.js version 16 or higher
2. Clear npm cache: `npm cache clean --force`
3. Delete `node_modules`, `package-lock.json`, and reinstall
4. Check the console for specific error messages