Reordering of imports causes circular dependency between three Redux files

[zaerl]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

By reordering as the linter suggests on packages/playground/website/src/main.tsx to:

import { collectWindowErrors, logger } from '@php-wasm/logger';
import { Provider } from 'react-redux';
import { EnsurePlaygroundSite } from './components/ensure-playground-site';
import { Layout } from './components/layout';
import store from './lib/state/redux/store';

it generate a circular dependency: store.ts > init-mcp-bridge.ts > slice-sites.ts > store.ts (circular) and then

Uncaught (in promise) ReferenceError: can't access lexical declaration 'setOPFSSitesLoadingState' before initialization

init-mcp-bridge.ts calls startListening({ actionCreator: setOPFSSitesLoadingState }) at module evaluation time (line 25), but because of the circular chain, slice-sites.ts hasn't finished exporting setOPFSSitesLoadingState yet when that line runs.

Expected behavior

Order shouldn't matter and the page load.

Actual behavior

Page should load.

Steps to reproduce

1. Reorder the imports
2. Load the page

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only this plugin is active.
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.