How to load translation in JavaScript?

I was having the same problem and this is how I solved it:

First, the generated JSON file has some errors. You need to update where it says messages with your text domain. There are three places where that needs to be changed. I also had to change the lang attribute to be all lowercase with a dash. Here are the fields I changed:

{
  "domain": "my-text-domain",
  "locale_data": {
    "my-text-domain": { // Instead of "messages"
      "": {
        "domain": "my-text-domain",
        "lang": "es-es"
      },
      ...
    }
  }
}

Second, the file name with the md5 hash tends to have the wrong md5 hash, so it's best to rename the file to {domain}-{locale}-{script-name}.json, so mine became my-text-domain-es_ES-my-script-name.js.

Third, the wp_set_script_translations function needs to be called with the right path, and attached to the right hook. This is what I had to do, since I was localizing an admin-side script:

function enqueue_scripts() {
    wp_set_script_translations( 'script-name', 'my-text-domain', plugin_dir_path( dirname(__FILE__) ) . 'languages' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_scripts' );

Try echoing out the value of plugin_dir_path( dirname(__FILE__) ) . 'languages' to make sure you're getting the path where your translation files are.

Once I sorted out all of these little details, my translations started working, so I hope this helps someone else!

TL;DR: run npm run build before executing wp i18n commands!

The problem described in this post also happens if you generate the .pot and .po files before generating the production js files. This will cause the wp CLI to produce only one JSON file (instead of two) and the app will not be able to find the one with the desired hash.

Suppose that you have a file src/App.js that is transformed to build/app.js by your npm scripts.

If you haven't produced the build/app.js file yet and you generate the POT file using wp i18n make-pot you will end having something like this in your POT file:

#: src/App.js:11
msgid "My label"
msgstr ""

The same will be reported in the .po files and only one JSON file will be produced, e.g. my-plugin-it_IT-14b1e33d5bf5649597cdc0e4f684dadd.json

If you run npm run build and then wp i18n make-pot, you can see that both the source file and the production file will be listed:

#: src/App.js:11
#: build/app.js:462
msgid "My label"
msgstr ""

Starting from this POT file, wp i18n make-json will produce 2 JSON files:

• my-plugin-it_IT-14b1e33d5bf5649597cdc0e4f684dadd.json (src/App.js)
• my-plugin-it_IT-b8c773ce202d23e4e6718b08f32ecf3c.json (build/app.js)

To verify the expected hash you can use the following command:

echo -n "build/app.js" | md5sum

Moreover, in your JavaScript files you may have to use

const { __ } = wp.i18n;

instead of

import { __ } from '@wordpress/i18n';

I'll leave it here. Perhaps it will help someone. I had the same issue. I did all steps and all looked working, but in JS __('Hello world', 'textdomain'); didn't work.

There are a lot of recommendations about the JSON file for example to use 'nl' instead 'nl_NL', etc. For today (2020.08.06) you shouldn't change a json-file in any way except its name as custom_dir/{domain}-{locale}-{handle}.json.

The base steps:

1. PHP code:

load_theme_textdomain( 'textdomain', get_template_directory() . '/languages' );
// ...
wp_enqueue_script( 'scripts', asset_url( 'js/app.js' ), [ 'jquery', 'wp-i18n' ], null, true );
wp_set_script_translations( 'scripts', 'textdomain', get_template_directory() .'/languages/js' );

2. I use the Poedit application for creating & translating the nl_NL.po file.

3. With WP-CLI I generate wp i18n make-json ./languages ./languages/js --no-purge --pretty-print a json-file and I reneme it to ./languages/js/textdomain-nl_NL-scripts.json.

The essential thing: The author's mistake is plugins_url('languages', __FILE__) in wp_set_script_translations();. My mistake was a simple get_template_directory_uri() instead of get_template_directory(). But the function requires "$path The full file path to the directory containing translation files".

All you need is placed here: https://developer.wordpress.org/block-editor/developers/internationalization/.

Inside the wp_set_script_translations function, you use plugins_url('languages', __FILE__) which is not the correct path.

You should use plugin_dir_path(__FILE__) . 'languages/'

Here are the steps I followed to make WordPress translations work in Javascript (WordPress 6.8.3):

1. Make sure you've added load_plugin_textdomain or load_theme_textdomain with proper hook (init for plugins and after_setup_theme for themes).
2. Use WP-CLI command to generate .json file with translations based on PO file - for example, wp i18n make-json languages/. Both $textdomain-$locale-md5.json and $textdomain-$locale-$handle.json work for me.
3. Make sure you've added wp_set_script_translations and added wp-i18n as dependency to wp_register_script or wp_enqueue_script function with proper hook wp_enqueue_scripts. After this, the translated string should be returned in the browser console:
   console.log(wp.i18n.__('Translated text', 'text-domain'))

If strings in Javascript are still not being translated, please check your script bundler configuration.
In my case, adding wp.i18n in webpack's externals configuration and using const { __ } = wp.i18n; fixed the issue.

I too could not get @wordpress/i18n to translate strings, despite following the directions on https://developer.wordpress.org/block-editor/how-to-guides/internationalization/ under "Provide Your Own Translations".

The following worked for me:

1. I was translating to Spanish and using just 'es' in my po file, which used the same in the generated json files. I changed that to es_ES.

2. I had multiple components importing @wordpress/i18n and when I ran "wp i18n make-json languages", separate json files were created for each with a hash in the file name. There is one json file for build/index.js - that file contained all translations and is the only one I needed.

3. I changed the json filename of the file referencing build/index.js (in #2 above) to: {Text Domain}-{locale}-{script-name}.json, so mine became localestr-es_ES-scriptname.json. In the above, localestr is my text domain set in my plugin and in my translation strings, ex: __('Back', 'localestr '). scriptname is the name used with wp_enqueue_script('scriptname')

Many people, in many places say wp_set_script_translations( 'myguten-script', 'myguten', plugin_dir_path( FILE ) . 'languages' ); Needs forward slashes before and/or after languages. I found a forward slash around 'languages' are not needed at all.

I was also able to leave "domain":"messages" in my json file. That works for me, and I did not need to change "messages" in 3 places to my Text Domain.

I hope this helps someone else. It's super frustrating to debug because there is so little documentation, debug options, and the documentation is missing a very important bit about the generated json files with wp-cli are not named correctly to automatically get set up with wp_set_script_translations.