`wp_set_script_translations` with `wp.i18n` does not return translated strings in simple plugin

Question

Short description:

I try to translate strings in JS file. To test it I decided to create a simple test plugin. I have PHP and JS strings there. Translated PHP strings work fine, JS strings don't work.

Tools and environment:

• WP-CLI 2.4.0
• Wordpress 5.5.1
• Ubuntu 20.04
• Original languange: English (United States)
• Translate language: German

Plugin PHP file content:

<?php

/*
 * Plugin Name: Test
 * Text Domain: test
 * Domain Path: /languages
 */

/**
 * Init all
 */
function run()
{
    wp_register_script(
        'script',
        plugins_url('script.js', __FILE__),
        array('wp-i18n'),
        false,
        true
    );
    wp_enqueue_script('script');

    wp_set_script_translations('script', 'test',  dirname(plugin_basename(__FILE__)) . '/languages/');
    load_plugin_textdomain('test', false, dirname(plugin_basename(__FILE__)) . '/languages/');
}
add_action('init', 'run');

/**
 * Register a custom menu page.
 */
function register_my_custom_menu_page()
{
    add_menu_page(
        'Custom Menu Title',
        __('Custom Menu', 'test'),
        'manage_options',
        'my_custom',
        'callback'
    );
}
add_action('admin_menu', 'register_my_custom_menu_page');

/**
 * Display a custom menu page
 */
function callback()
{
    esc_html_e('Admin Page', 'test'); ?>
    <h1 id="h1"></h1>
<?php }

Plugin JS file content:

const { __ } = wp.i18n;

alert(__('js-alert', 'test'));

console.log(__('js-log', 'test'));

div = document.getElementById('h1');
div.innerHTML += __('js-html', 'test');

Procedure for creating translation files:

1. Creating POT file with wp i18n make-pot . languages/test.pot
2. Creating PO file with cp languages/test.pot languages/test-de_DE.po
3. Filling msgstr strings in test-de_DE.po
4. Adding line "Language: de_DE\n" to test-de_DE.po
5. Creating MO file with msgfmt languages/test-de_DE.po -o languages/test-de_DE.mo
6. Creating JSON file with wp i18n make-json languages/test-de_DE.po --no-purge --pretty-print

Language files structure after performing the steps above:

wp-content/plugins/test/languages/test-de_DE-9a9569e9d73f33740eada95275da7f30.json
wp-content/plugins/test/languages/test-de_DE.mo
wp-content/plugins/test/languages/test-de_DE.po
wp-content/plugins/test/languages/test.pot

The content of test-de_DE.po that was used to create the MO and JSON

# Copyright (C) 2020
# This file is distributed under the same license as the Test plugin.
msgid ""
msgstr ""
"Project-Id-Version: Test\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/test\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <[email protected]>\n"
"Language: de_DE\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2020-10-28T10:43:41+01:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.4.0\n"
"X-Domain: test\n"

#. Plugin Name of the plugin
msgid "Test"
msgstr "Test DE"

#: test.php:35
msgid "Custom Menu"
msgstr "Custom Menu DE"

#: test.php:48
msgid "Admin Page"
msgstr "Admin Page DE"

#: script.js:3
msgid "js-alert"
msgstr "js-alert-de"

#: script.js:5
msgid "js-log"
msgstr "js-log-de"

#: script.js:8
msgid "js-html"
msgstr "js-html-de"

Result on my test website:

Additional context:

• wp_set_script_translations returns true all the time
• load_plugin_textdomain returns true all the time
• i know i can use wp_localize_script() but i would like to do it entirely with wp.i18n

Plugin files structure:

/test
  /languages
    test-de_DE-9a9569e9d73f33740eada95275da7f30.json
    test-de_DE.mo
    test-de_DE.po
    test.pot
  scripts.js
  test.php

Answer 1

Ok, a simple change

• dirname(plugin_basename(__FILE__)) . '/languages/' inside wp_set_script_translations() function (3rd argument)

to

• plugin_dir_path(__FILE__) . 'languages/'

fixed the problem