Admin bar script breaks on front end: `code-snippets-admin-bar` enqueued without the `wp-i18n` dependency

[manuluyten]

Current behavior

On the front end, with the admin bar showing, the Code Snippets admin bar bundle throws immediately and never runs:

admin-bar.js?ver=3.10.0:2 Uncaught TypeError: Cannot read properties of undefined (reading 'i18n')

The undefined is window.wp, not wp.i18n. The QuickNav admin bar menu is therefore non-functional on the front end.

Expected behavior

The admin bar script loads its dependencies and the QuickNav menu works on the front end as it does in wp-admin.

Steps to reproduce

1. Install Code Snippets 3.10.0 on a clean site (no other plugins needed).
2. Log in as an administrator with the admin bar enabled.
3. Visit any front end page (not wp-admin).
4. Open the browser console and see the error.

Root cause

Admin_Bar::enqueue_assets() in src/php/Integration/Admin_Bar.php registers the script with an empty dependency array:

wp_enqueue_script(
	self::SCRIPT_HANDLE,          // 'code-snippets-admin-bar'
	plugins_url( 'dist/admin-bar.js', PLUGIN_FILE ),
	[],                            // <- no dependencies declared
	PLUGIN_VERSION,
	[ 'in_footer' => true ]
);

But the bundle does depend on wp.i18n, via this import chain:

• src/js/entries/admin-bar.ts imports getSnippetType from src/js/utils/snippets/snippets.ts
• src/js/utils/snippets/snippets.ts starts with import { __, sprintf } from '@wordpress/i18n'
• config/webpack/webpack-js.ts sets externalsType: 'window' and maps every @wordpress/* import to ['wp', toCamelCase(...)], so @wordpress/i18n resolves to window.wp.i18n at runtime

There is no DependencyExtractionWebpackPlugin producing an .asset.php, so dependencies have to be declared by hand and this one is missing.

It fails specifically on the front end because nothing there enqueues wp-i18n, so window.wp is undefined. In wp-admin the global usually already exists thanks to other core scripts, which is why this is easy to miss during development.

The __() calls in snippets.ts sit in a top level const (SNIPPET_TYPE_LABELS), so they execute at module parse time rather than on first use. That is why the entire bundle dies instead of just one menu item.

Suggested fix

Declare the dependency:

wp_enqueue_script(
	self::SCRIPT_HANDLE,
	plugins_url( 'dist/admin-bar.js', PLUGIN_FILE ),
	[ 'wp-i18n' ],
	PLUGIN_VERSION,
	[ 'in_footer' => true ]
);

While you are in there: wp_set_script_translations() is never called for this handle either, so the strings in this bundle can never be translated regardless of the crash.

Workaround

For anyone hitting this before a patch release:

add_action( 'wp_enqueue_scripts', 'cs_fix_admin_bar_i18n_dep', 100 );
add_action( 'admin_enqueue_scripts', 'cs_fix_admin_bar_i18n_dep', 100 );

function cs_fix_admin_bar_i18n_dep() {
	$script = wp_scripts()->query( 'code-snippets-admin-bar', 'registered' );

	if ( $script && ! in_array( 'wp-i18n', $script->deps, true ) ) {
		$script->deps[] = 'wp-i18n';
	}
}

WordPress version

Code Snippets version

3.10.0

Code Snippets license

Core (free)

Anything else?

The admin bar integration was introduced in #328. The empty dependency array has been there since, so this is not a regression in 3.10.0 as such, it is just now reaching a wide audience via the stable release (#458).

[code-snippets-bot]

Fixed by #461 (core-beta) and #464 (core/3.10.1). Both PRs merged.