When I click the "Reload" button in Chrome, the "redux-essentials-example" app crashes with an unhandled exception.
I'm using the "Tutorial-Steps" branch of the app. I've updated it to use the current version of msw
and to avoid the openSSL issues.
The log (saved by using the "Save as..." command from Chrome developer tools) is:
index.js:683 [MSW] Mocking enabled.
UserPage.js:17 Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
at UserPage.js:17:1
at recomputationWrapper (index.js:67:1)
at memoized (defaultMemoize.js:123:1)
at dependenciesChecker (index.js:81:1)
at memoized (defaultMemoize.js:123:1)
at selectFromResult (UserPage.js:30:1)
at recomputationWrapper (index.js:67:1)
at memoized (defaultMemoize.js:123:1)
at dependenciesChecker (index.js:81:1)
at memoized (defaultMemoize.js:123:1)
(anonymous) @ UserPage.js:17
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
selectFromResult @ UserPage.js:30
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
(anonymous) @ buildHooks.ts:928
useSelectorWithStoreAndSubscription @ useSelector.js:29
useSelector @ useSelector.js:129
useQueryState @ buildHooks.ts:926
useQuery @ buildHooks.ts:963
UserPage @ UserPage.js:25
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
start @ index.js:19
await in start (async)
./src/index.js @ index.js:29
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <UserPage> component:
at UserPage (http://localhost:5099/static/js/bundle.js:2279:3)
at Route (http://localhost:5099/static/js/bundle.js:121939:29)
at Switch (http://localhost:5099/static/js/bundle.js:122108:29)
at div
at Router (http://localhost:5099/static/js/bundle.js:121611:30)
at BrowserRouter (http://localhost:5099/static/js/bundle.js:121126:35)
at App
at Provider (http://localhost:5099/static/js/bundle.js:118609:20)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
start @ index.js:19
await in start (async)
./src/index.js @ index.js:29
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
UserPage.js:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filter')
at UserPage.js:17:1
at recomputationWrapper (index.js:67:1)
at memoized (defaultMemoize.js:123:1)
at dependenciesChecker (index.js:81:1)
at memoized (defaultMemoize.js:123:1)
at selectFromResult (UserPage.js:30:1)
at recomputationWrapper (index.js:67:1)
at memoized (defaultMemoize.js:123:1)
at dependenciesChecker (index.js:81:1)
at memoized (defaultMemoize.js:123:1)
(anonymous) @ UserPage.js:17
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
selectFromResult @ UserPage.js:30
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
(anonymous) @ buildHooks.ts:928
useSelectorWithStoreAndSubscription @ useSelector.js:29
useSelector @ useSelector.js:129
useQueryState @ buildHooks.ts:926
useQuery @ buildHooks.ts:963
UserPage @ UserPage.js:25
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
start @ index.js:19
await in start (async)
./src/index.js @ index.js:29
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
rest-deps.js:82 [MSW] 13:01:35 GET /fakeApi/users (200 OK)
When I step through the failure in vscode
, I see that at line 29 of 'node_modules/react-redux/es/hooks/useSelector.js'. the value assigned to newSelectedState
is undefined
. Here is the apparently failing code fragment:
try {
if (selector !== latestSelector.current || storeState !== latestStoreState.current || latestSubscriptionCallbackError.current) {
var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references
if (latestSelectedState.current === undefined || !equalityFn(newSelectedState, latestSelectedState.current)) {
selectedState = newSelectedState;
} else {
selectedState = latestSelectedState.current;
}
} else {
selectedState = latestSelectedState.current;
}
} catch (err) {
if (latestSubscriptionCallbackError.current) {
err.message += "\nThe error may be correlated with this previous error:\n" + latestSubscriptionCallbackError.current.stack + "\n\n";
}
throw err;
}
The line (from the above code) that seems to be causing the issue is:
var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references
The RHS of this assignment ends up being undefined
, and thus so is the value of newSelectedState
. I've tried stepping into the selector(storeState)
call, but I'm not familiar enough with redux
internals to make sense of the call chain.
This value of newSelectedState
is returned as the value of selectedState
from useSelector
. This means that the value of user
in UserPage
(at line 12) is undefined
. So far as I can tell, this throws an (uncaught) exception that in turn causes the above console complaints.
Here is the value of storeState
during the failure sequence just before calling selector(storeState)
:
{
notifications: {
ids: [],
entities: {},
},
api: {
queries: {
"getUsers(undefined)": {
status: "pending",
endpointName: "getUsers",
requestId: "HHXFluhAgUyqda1kPubaK",
startedTimeStamp: 1692900474182,
},
},
mutations: {},
provided: {},
subscriptions: {},
config: {
online: true,
focused: true,
middlewareRegistered: true,
refetchOnFocus: false,
refetchOnReconnect: false,
refetchOnMountOrArgChange: false,
keepUnusedDataFor: 60,
reducerPath: "api",
},
},
}
I don't know enough about how redux
is supposed to behave to understand whether this value of storeState
is correct or not. Since this seems to be happening inside a redux
hook ('useSelector.js'), I don't know the tool enough to dig further.
If this is simply a bug with the tutorial, then I'll ignore it. If this means that my app that uses redux
will fail in a similar way, then I'll want a work-around.
I appreciate your attention!