wp-each "Cannot access 'state' before initialization"

[poof86]

Description

I've updated gutenberg from a v18... to the current v20.2.0 and it seems something has changed with how the state is initialised before directives are parsed.

My wp-each directive referencing a state derived getter wasn't a problem before. Now when the wp-each directive is parsed and calls a getter on the state that uses the state variable I'm getting the error: "ReferenceError: Cannot access 'state' before initialization"

I had to wrap the first access to the state in the getter with a try catch to find out this was the problem.

Step-by-step reproduction instructions

• Create a state getter in which you reference the state
• Use this getter in a data-wp-each
• Wrap the line where you access the state in the getter with a try..catch to catch the error

Screenshots, screen recording, code snippet

Example:

view.js state getter snippet

const { state } = store('mynamespace/query', {
state: {
	get terms() {
        	try {
			const { taxonomy : taxonomyQuery = {} } = state;
			const { taxonomy } = getContext();
			return taxonomyQuery[taxonomy] ?? [];
        	} catch (error) {
			console.log(error);
			return [];
		}
	}
}

render.php snippet

<template data-wp-each="state.terms">
	<a 
		data-wp-text="state.termLabel"
	></a>
</template>

Environment info

Wordpress 6.7.2
Gutenberg 20.2.0
Custom theme

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[poof86]

I've been trying to figure out long before posting this issue why my code stopped working, and of course just after posting it I found a (temporary) solution. Simply get the state reference before creating your actual state implementation:

const { state } = store('mynamespace/query');

store('mynamespace/query', {
	 state: {
	 	 get terms() {
...

But this shouldn't be needed right?