Google Cloud环境中React项目react-i18next无法加载JSON翻译文件

数据老陈

2026-5-27

Fix for i18next-xhr-backend Redirecting to index.html Instead of Loading translation.json

Hey there, I’ve run into this exact issue before with Create React App and i18next—let’s break down what’s going on and how to fix it.

The Core Problem

Your error (i18next::backendConnector: loading namespace translation for language en failed failed parsing locales/en/translation.json to json) happens because when you hit that JSON URL in production, your server is redirecting the request to index.html instead of serving the actual JSON file. This is super common with SPAs (Single Page Apps) built with CRA, since servers are configured to route all requests through index.html for client-side routing—but that breaks static asset requests like your translation files.

Step-by-Step Solutions

1. Adjust Your Server Configuration

The fix depends on what server you’re using to host your app:

For Nginx

Add a location block before your main SPA routing rule to explicitly serve files from the /locales/ directory:

server {
    # ... other existing configs ...

    # Serve translation files directly without redirecting to index.html
    location /locales/ {
        root /path/to/your/build/directory;
        try_files $uri =404;
    }

    # Main SPA routing rule (keep this after the locales block)
    location / {
        root /path/to/your/build/directory;
        try_files $uri $uri/ /index.html;
    }
}

For Apache

Update your .htaccess file (in your build directory) to exclude the /locales/ path from the rewrite rule:

RewriteEngine On
RewriteBase /

# Skip the locales directory from SPA routing
RewriteCond %{REQUEST_URI} !^/locales/
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
RewriteRule ^ index.html [L]

For Netlify/Vercel (Static Hosting)

Create a _redirects file in your project’s public directory (it will automatically be copied to the build folder during deployment) with this rule:

/locales/* /locales/:splat 200

2. Double-Check Your JSON File Syntax

Even if you’re confident in your file, a tiny syntax error (like a missing comma, unescaped quote, or trailing comma) can cause the parse failure. Try pasting your translation.json into a JSON validator tool to rule out this possibility.

3. Confirm Your Load Path Matches Deployment Context

If your app is deployed under a subpath (e.g., https://example.com/my-app/), you’ll need to update the loadPath in your i18n.js to include that base path:

backend: {
  loadPath: '/my-app/locales/{{lng}}/translation.json',
  allowMultiLoading: true
}

Quick Verification

After making these changes, try accessing https://example.com/locales/en/translation.json again—you should see the raw JSON content instead of the index.html page. Once that works, your i18next setup will load translations correctly.

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