i18next backend fetch failed 404 on translation json

Fix i18next backend fetch failing with 404 on the translation JSON

TL;DR

The 404 means your loadPath does not match where the JSON files actually live, fix the path or the server rewrite first. Check the network tab for the exact URL being requested, then make that URL return the file. Nine times out of ten the app is served from a subpath and the loadPath is still root-relative.

The error

i18next: backend: failed to load YOUR_HOST/locales/en/translation.json
GET YOUR_HOST/locales/en/translation.json 404 (Not Found)

Fix it

Step 1: Copy the exact failing URL from the network tab

curl -s -o /dev/null -w "%{http_code}" YOUR_HOST/locales/en/translation.json

Expected: You get 404, confirming the file is not served at that URL.

Step 2: Check where the file really lives in your build output

find dist public -name "translation.json" | head -5

Expected: You see the real path, e.g. under a base path or assets folder.

Step 3: Align loadPath with the served location

grep -rn "loadPath" src/i18n.js

Expected: loadPath now points at the real location, including any base path your app is served from.

Step 4: Reload and confirm the backend returns 200

curl -s -o /dev/null -w "%{http_code}" YOUR_HOST/locales/en/translation.json

Expected: You get 200 and the translations render.

When to use this

• The console shows backend failed to load with a 404 for a locale JSON file
• Translations work locally but break after deploy

When NOT to use this

• The fetch returns 200 but keys are still missing, that is a missing-key problem
• The fetch fails with 401 or 403, that is an auth problem not a path problem

Tool and version compatibility

• i18next-http-backend v1 and v2, any bundler
• Applies to apps served from subpaths, CDNs, and static hosts

Variant phrasings

404 only for some languages

Those JSON files were never generated or uploaded. Check your build emits every language in the whitelist.

404 behind a CDN with cache

The file exists at origin but the CDN cached the 404. Purge the locale paths on the CDN after deploy.

Why it happens

i18next-http-backend builds the fetch URL from loadPath plus language plus namespace. If the app is served from a subpath, behind a rewrite, or the JSON was emitted somewhere else by the bundler, the constructed URL points at nothing and the server answers 404.

Edge cases

• Hash-based filenames from the bundler break loadPath, keep locale JSON out of hashed assets
• Trailing slashes in loadPath double up path segments, keep exactly one separator
• Service workers can serve a stale 404, bump the cache version when locale paths change

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_gT0bzK2nir5mZqbS9YGnsg