Cannot send messages in local dev since React strict mode was enabled

[timvahlbrock]

Steps to reproduce

1. Start a local development instance using yarn start on commit da5c97f or later
2. Start a poll
3. Try to vote

Outcome

What did you expect?

No error is thrown,

What happened instead?

"Cannot read properties of undefined (reading 'getEvents')" is thrown. Seems to be fine on develop.element.io and on commits before da5c97f.

Operating system

macOS

Browser information

Chrome, Safari

URL for webapp

localhost

Application version

Commit da5c97f and following version

Homeserver

matrix.org

Will you send logs?

Yes

[timvahlbrock]

Willing to send logs, but local instance says /rageshake command is unknown.

[timvahlbrock]

Full stack trace:

Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'getEvents')
    at getEvents (/Users/timvahlbrock/Projects/element-web/src/components/structures/TimelinePanel.tsx:1685:49)
    at reloadEvents (/Users/timvahlbrock/Projects/element-web/src/components/structures/TimelinePanel.tsx:1672:28)
    at <anonymous> (/Users/timvahlbrock/Projects/element-web/src/components/structures/TimelinePanel.tsx:913:14)
    at emit (/Users/timvahlbrock/Projects/matrix-js-sdk/node_modules/events/events.js:158:1)
    at emit (/Users/timvahlbrock/Projects/matrix-js-sdk/src/models/typed-event-emitter.ts:89:22)
    at forSource (/Users/timvahlbrock/Projects/matrix-js-sdk/src/ReEmitter.ts:55:29)
    at emit (/Users/timvahlbrock/Projects/matrix-js-sdk/node_modules/events/events.js:158:1)
    at emit (/Users/timvahlbrock/Projects/matrix-js-sdk/src/models/typed-event-emitter.ts:89:22)
    at addPendingEvent (/Users/timvahlbrock/Projects/matrix-js-sdk/src/models/room.ts:2644:14)
    at sendCompleteEvent (/Users/timvahlbrock/Projects/matrix-js-sdk/src/client.ts:4726:19)
    at sendEvent (/Users/timvahlbrock/Projects/matrix-js-sdk/src/client.ts:4601:21)
    at selectOption (/Users/timvahlbrock/Projects/element-web/src/components/views/messages/MPollBody.tsx:222:14)
    at onClick (/Users/timvahlbrock/Projects/element-web/src/components/views/polls/PollOption.tsx:97:85)
    at callCallback (/Users/timvahlbrock/Projects/element-web/node_modules/react-dom/cjs/react-dom.development.js:4164:1)
    at invokeGuardedCallbackDev (/Users/timvahlbrock/Projects/element-web/node_modules/react-dom/cjs/react-dom.development.js:4213:1)
    at invokeGuardedCallback (/Users/timvahlbrock/Projects/element-web/node_modules/react-dom/cjs/react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (/Users/timvahlbrock/Projects/element-web/node_modules/react-dom/cjs/react-dom.development.js:4291:1)

[timvahlbrock]

Also reproduced this on a fresh checkout and build.

[timvahlbrock]

Just realised that I seem to be unable to send any messages at all.

[timvahlbrock]

Debugged a bit. Seems like this is caused by a second TimelimePanel being created, but it's componentDidMount function not being called. The following warning might or might not be related to this, it is logged with & without strict mode.

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the TimelinePanel component.