Description

When binding an attribute using data-wp-bind to a direct child of a data-wp-each loop, you get the following errors:

hooks.tsx:272 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classes')
    at hooks.tsx:272:50
    at Array.forEach (<anonymous>)
    at hooks.tsx:272:20
    at hooks.tsx:288:17
    at directives.js:361:20
directives.js:403 Uncaught TypeError: Cannot use 'in' operator to search for 'aria-expanded' in null
    at directives.js:403:7
    at Object.__ (utils.js:112:11)
    at at (hooks.module.js:1:3307)
    at Array.forEach (<anonymous>)
    at ut (hooks.module.js:1:2120)

It does seem to bind the attribute correctly, but any interactivity is broken.

Step-by-step reproduction instructions

Minimal example to reproduce the issue:

<?php
$context = [
	'items' => [
		[
			'id'      => 1,
			'title'   => 'Hello World',
			'classes' => 'class1 class2',
		],
		[
			'id'      => 2,
			'title'   => 'Hi World',
			'classes' => 'class1 class2',
		],
	],
];
?>

<div
	<?php echo wp_interactivity_data_wp_context( $context ); ?>
	data-wp-interactive="example"
>
	<template data-wp-each="context.items" data-wp-each-key="context.item.id">
		<div data-wp-bind--class="context.item.classes">
			<span data-wp-text="context.item.title"></span>
		</div>
	</template>
</div>

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.5
• Problem occurs without Gutenberg as well as with the latest version (18.1.2)
• Chrome, macOS

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes