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?

[luisherranz]

I'm unable to reproduce with 6.18.0 (current version shipped in 20.3) or 6.17.0 (version shipped in 20.2).

Could you please modify this Stackblitz template until you reproduce the problem?

If you don't want to use StackBlitz, then please create a new block and try to reproduce it there.