Files
paul 508a844327 fix: Resolve i18n dependency issues for different environments
- Update i18n package versions to stable, compatible versions
- Add install-i18n.sh script for easy setup in any environment
- Create comprehensive I18N_SETUP.md troubleshooting guide
- Use legacy-peer-deps flag to avoid npm conflicts
- Provide clear instructions for Docker and local environments

This ensures the German translation feature works correctly
across different development and deployment environments.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-23 21:50:22 +02:00

3.1 KiB

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:

cd frontend
./install-i18n.sh

Option 2: Manual Installation

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:

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:
    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:

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:

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:

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

Docker Setup

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

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