Uncaught TypeError when using yarn start

[ashfame]

Uncaught TypeError: Class extends value undefined is not a constructor or null when running yarn start. yarn build works successfully!

This possibly happened when we upgraded hydrogen dependency to latest version.

This suggests circular dependency as a cause for this kind of error (though neither sure nor confirmed), using madge tool I found 27 circular dependencies.

ashfame@Ashfames-MBP chatrix % madge --circular --extensions ts frontend
Processed 297 files (852ms) (156 warnings)

✖ Found 27 circular dependencies!

1) ../../hydrogen-web/src/domain/login/LoginViewModel.ts > ../../hydrogen-web/src/domain/login/PasswordLoginViewModel.ts
2) ../../hydrogen-web/src/domain/login/LoginViewModel.ts > ../../hydrogen-web/src/domain/login/StartSSOLoginViewModel.ts
3) ../../hydrogen-web/src/matrix/net/HomeServerApi.ts > ../../hydrogen-web/src/matrix/net/Reconnector.ts
4) ../../hydrogen-web/src/matrix/storage/idb/QueryTarget.ts > ../../hydrogen-web/src/matrix/storage/idb/Store.ts
5) ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/Storage.ts
6) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts
7) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/AccountDataStore.ts
8) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/CallStore.ts
9) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/DeviceIdentityStore.ts
10) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/GroupSessionDecryptionStore.ts
11) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/InboundGroupSessionStore.ts
12) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/InviteStore.ts
13) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/InviteStore.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/RoomMemberStore.ts
14) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/OlmSessionStore.ts
15) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/OperationStore.ts
16) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/OutboundGroupSessionStore.ts
17) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/PendingEventStore.ts
18) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/RoomStateStore.ts
19) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/RoomSummaryStore.ts
20) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/SessionStore.ts
21) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/TimelineEventStore.ts
22) ../../hydrogen-web/src/matrix/storage/idb/QueryTarget.ts > ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/TimelineEventStore.ts > ../../hydrogen-web/src/mocks/Storage.ts > ../../hydrogen-web/src/matrix/storage/idb/StorageFactory.ts > ../../hydrogen-web/src/matrix/storage/idb/schema.ts
23) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/TimelineEventStore.ts > ../../hydrogen-web/src/mocks/Storage.ts > ../../hydrogen-web/src/matrix/storage/idb/StorageFactory.ts > ../../hydrogen-web/src/matrix/storage/idb/schema.ts
24) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/TimelineFragmentStore.ts
25) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/TimelineRelationStore.ts
26) ../../hydrogen-web/src/matrix/storage/idb/Store.ts > ../../hydrogen-web/src/matrix/storage/idb/Transaction.ts > ../../hydrogen-web/src/matrix/storage/idb/stores/UserIdentityStore.ts
27) vite.ts

[ashfame]

Works now 🤷‍♂️

[ashfame]

@psrpinto & I tried to fix this during our pairing session. Its still happening, but we aren't really using yarn start in development as such. Been completely relying on yarn build to work with WordPress context.

Issue was introduced when the dependency of Hydrogen was updated to 0.3.7 (we verified this via git bisect). Not an easy fix since over 200 files are modified in Hydrogen between 0.3.6 and 0.3.7 - element-hq/hydrogen-web@v0.3.6...v0.3.7