Bug: Front-End Occupation Details Page - .map error - intermittent

[DeeJaeMann]

Adjust loading to useLoaderData

This will ensure that all of the required data is loaded before the page renders.

[DeeJaeMann]

TypeError: Cannot read properties of undefined (reading 'map') at OccupationDetailsPage (http://localhost:5173/src/pages/OccupationDetailsPage.jsx:78:42) at renderWithHooks (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:12171:26) at updateFunctionComponent (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:14577:28) at beginWork (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:15912:22) at beginWork$1 (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:19749:22) at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:19194:20) at workLoopSync (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:19133:13) at renderRootSync (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:19112:15) at recoverFromConcurrentError (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:18732:28) at performConcurrentWorkOnRoot (http://localhost:5173/node_modules/.vite/deps/chunk-XBHG3ID7.js?v=bf7193f1:18680:30)

[DeeJaeMann]

Console: getEducation occupations.jsx:72 {id: 7, description: {…}, occupation: 21} occupations.jsx:73 {error: 'This resource does not exist'} error : "This resource does not exist" [[Prototype]] : Object

[DeeJaeMann]

Console: OccupationDetailsPage.jsx:52 Uncaught TypeError: Cannot read properties of undefined (reading 'map') at OccupationDetailsPage (OccupationDetailsPage.jsx:52:45) at renderWithHooks (chunk-XBHG3ID7.js?v=bf7193f1:12171:26) at updateFunctionComponent (chunk-XBHG3ID7.js?v=bf7193f1:14577:28) at beginWork (chunk-XBHG3ID7.js?v=bf7193f1:15912:22) at HTMLUnknownElement.callCallback2 (chunk-XBHG3ID7.js?v=bf7193f1:3674:22) at Object.invokeGuardedCallbackDev (chunk-XBHG3ID7.js?v=bf7193f1:3699:24) at invokeGuardedCallback (chunk-XBHG3ID7.js?v=bf7193f1:3733:39) at beginWork$1 (chunk-XBHG3ID7.js?v=bf7193f1:19761:15) at performUnitOfWork (chunk-XBHG3ID7.js?v=bf7193f1:19194:20) at workLoopSync (chunk-XBHG3ID7.js?v=bf7193f1:19133:13) OccupationDetailsPage @ OccupationDetailsPage.jsx:52 renderWithHooks @ chunk-XBHG3ID7.js?v=bf7193f1:12171 updateFunctionComponent @ chunk-XBHG3ID7.js?v=bf7193f1:14577 beginWork @ chunk-XBHG3ID7.js?v=bf7193f1:15912 callCallback2 @ chunk-XBHG3ID7.js?v=bf7193f1:3674 invokeGuardedCallbackDev @ chunk-XBHG3ID7.js?v=bf7193f1:3699 invokeGuardedCallback @ chunk-XBHG3ID7.js?v=bf7193f1:3733 beginWork$1 @ chunk-XBHG3ID7.js?v=bf7193f1:19761 performUnitOfWork @ chunk-XBHG3ID7.js?v=bf7193f1:19194 workLoopSync @ chunk-XBHG3ID7.js?v=bf7193f1:19133 renderRootSync @ chunk-XBHG3ID7.js?v=bf7193f1:19112 performConcurrentWorkOnRoot @ chunk-XBHG3ID7.js?v=bf7193f1:18674 workLoop @ chunk-XBHG3ID7.js?v=bf7193f1:197 flushWork @ chunk-XBHG3ID7.js?v=bf7193f1:176 performWorkUntilDeadline @ chunk-XBHG3ID7.js?v=bf7193f1:384 Show 14 more frames Show less console.js:213 Error handled by React Router default ErrorBoundary: TypeError: Cannot read properties of undefined (reading 'map') at OccupationDetailsPage (OccupationDetailsPage.jsx:52:45) at renderWithHooks (chunk-XBHG3ID7.js?v=bf7193f1:12171:26) at updateFunctionComponent (chunk-XBHG3ID7.js?v=bf7193f1:14577:28) at beginWork (chunk-XBHG3ID7.js?v=bf7193f1:15912:22) at beginWork$1 (chunk-XBHG3ID7.js?v=bf7193f1:19749:22) at performUnitOfWork (chunk-XBHG3ID7.js?v=bf7193f1:19194:20) at workLoopSync (chunk-XBHG3ID7.js?v=bf7193f1:19133:13) at renderRootSync (chunk-XBHG3ID7.js?v=bf7193f1:19112:15) at performConcurrentWorkOnRoot (chunk-XBHG3ID7.js?v=bf7193f1:18674:83) at workLoop (chunk-XBHG3ID7.js?v=bf7193f1:197:42) at DefaultErrorComponent (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3488:15) at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3520:5) at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4670:5) at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3938:15) at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4487:5) overrideMethod @ console.js:213 DefaultErrorComponent @ react-router-dom.js?v=bf7193f1:3502 renderWithHooks @ chunk-XBHG3ID7.js?v=bf7193f1:12171 mountIndeterminateComponent @ chunk-XBHG3ID7.js?v=bf7193f1:14921 beginWork @ chunk-XBHG3ID7.js?v=bf7193f1:15902 beginWork$1 @ chunk-XBHG3ID7.js?v=bf7193f1:19749 performUnitOfWork @ chunk-XBHG3ID7.js?v=bf7193f1:19194 workLoopSync @ chunk-XBHG3ID7.js?v=bf7193f1:19133 renderRootSync @ chunk-XBHG3ID7.js?v=bf7193f1:19112 performConcurrentWorkOnRoot @ chunk-XBHG3ID7.js?v=bf7193f1:18674 workLoop @ chunk-XBHG3ID7.js?v=bf7193f1:197 flushWork @ chunk-XBHG3ID7.js?v=bf7193f1:176 performWorkUntilDeadline @ chunk-XBHG3ID7.js?v=bf7193f1:384 Show 13 more frames Show less OccupationDetailsPage.jsx:52 Uncaught TypeError: Cannot read properties of undefined (reading 'map') at OccupationDetailsPage (OccupationDetailsPage.jsx:52:45) at renderWithHooks (chunk-XBHG3ID7.js?v=bf7193f1:12171:26) at updateFunctionComponent (chunk-XBHG3ID7.js?v=bf7193f1:14577:28) at beginWork (chunk-XBHG3ID7.js?v=bf7193f1:15912:22) at HTMLUnknownElement.callCallback2 (chunk-XBHG3ID7.js?v=bf7193f1:3674:22) at Object.invokeGuardedCallbackDev (chunk-XBHG3ID7.js?v=bf7193f1:3699:24) at invokeGuardedCallback (chunk-XBHG3ID7.js?v=bf7193f1:3733:39) at beginWork$1 (chunk-XBHG3ID7.js?v=bf7193f1:19761:15) at performUnitOfWork (chunk-XBHG3ID7.js?v=bf7193f1:19194:20) at workLoopSync (chunk-XBHG3ID7.js?v=bf7193f1:19133:13) OccupationDetailsPage @ OccupationDetailsPage.jsx:52 renderWithHooks @ chunk-XBHG3ID7.js?v=bf7193f1:12171 updateFunctionComponent @ chunk-XBHG3ID7.js?v=bf7193f1:14577 beginWork @ chunk-XBHG3ID7.js?v=bf7193f1:15912 callCallback2 @ chunk-XBHG3ID7.js?v=bf7193f1:3674 invokeGuardedCallbackDev @ chunk-XBHG3ID7.js?v=bf7193f1:3699 invokeGuardedCallback @ chunk-XBHG3ID7.js?v=bf7193f1:3733 beginWork$1 @ chunk-XBHG3ID7.js?v=bf7193f1:19761 performUnitOfWork @ chunk-XBHG3ID7.js?v=bf7193f1:19194 workLoopSync @ chunk-XBHG3ID7.js?v=bf7193f1:19133 renderRootSync @ chunk-XBHG3ID7.js?v=bf7193f1:19112 recoverFromConcurrentError @ chunk-XBHG3ID7.js?v=bf7193f1:18732 performConcurrentWorkOnRoot @ chunk-XBHG3ID7.js?v=bf7193f1:18680 workLoop @ chunk-XBHG3ID7.js?v=bf7193f1:197 flushWork @ chunk-XBHG3ID7.js?v=bf7193f1:176 performWorkUntilDeadline @ chunk-XBHG3ID7.js?v=bf7193f1:384 Show 15 more frames Show less console.js:213 Error handled by React Router default ErrorBoundary: TypeError: Cannot read properties of undefined (reading 'map') at OccupationDetailsPage (OccupationDetailsPage.jsx:52:45) at renderWithHooks (chunk-XBHG3ID7.js?v=bf7193f1:12171:26) at updateFunctionComponent (chunk-XBHG3ID7.js?v=bf7193f1:14577:28) at beginWork (chunk-XBHG3ID7.js?v=bf7193f1:15912:22) at beginWork$1 (chunk-XBHG3ID7.js?v=bf7193f1:19749:22) at performUnitOfWork (chunk-XBHG3ID7.js?v=bf7193f1:19194:20) at workLoopSync (chunk-XBHG3ID7.js?v=bf7193f1:19133:13) at renderRootSync (chunk-XBHG3ID7.js?v=bf7193f1:19112:15) at recoverFromConcurrentError (chunk-XBHG3ID7.js?v=bf7193f1:18732:28) at performConcurrentWorkOnRoot (chunk-XBHG3ID7.js?v=bf7193f1:18680:30) at DefaultErrorComponent (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3488:15) at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3520:5) at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4670:5) at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3938:15) at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4487:5) overrideMethod @ console.js:213 DefaultErrorComponent @ react-router-dom.js?v=bf7193f1:3502 renderWithHooks @ chunk-XBHG3ID7.js?v=bf7193f1:12171 mountIndeterminateComponent @ chunk-XBHG3ID7.js?v=bf7193f1:14921 beginWork @ chunk-XBHG3ID7.js?v=bf7193f1:15902 beginWork$1 @ chunk-XBHG3ID7.js?v=bf7193f1:19749 performUnitOfWork @ chunk-XBHG3ID7.js?v=bf7193f1:19194 workLoopSync @ chunk-XBHG3ID7.js?v=bf7193f1:19133 renderRootSync @ chunk-XBHG3ID7.js?v=bf7193f1:19112 recoverFromConcurrentError @ chunk-XBHG3ID7.js?v=bf7193f1:18732 performConcurrentWorkOnRoot @ chunk-XBHG3ID7.js?v=bf7193f1:18680 workLoop @ chunk-XBHG3ID7.js?v=bf7193f1:197 flushWork @ chunk-XBHG3ID7.js?v=bf7193f1:176 performWorkUntilDeadline @ chunk-XBHG3ID7.js?v=bf7193f1:384 Show 14 more frames Show less console.js:213 The above error occurred in the component:

at OccupationDetailsPage (http://localhost:5173/src/pages/OccupationDetailsPage.jsx:27:33)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3560:5)
at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3931:26)
at App (http://localhost:5173/src/App.jsx:30:27)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3560:5)
at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3520:5)
at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4670:5)
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3938:15)
at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4487:5)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary. overrideMethod @ console.js:213 logCapturedError @ chunk-XBHG3ID7.js?v=bf7193f1:14036 callback @ chunk-XBHG3ID7.js?v=bf7193f1:14082 callCallback @ chunk-XBHG3ID7.js?v=bf7193f1:10511 commitUpdateQueue @ chunk-XBHG3ID7.js?v=bf7193f1:10528 commitLayoutEffectOnFiber @ chunk-XBHG3ID7.js?v=bf7193f1:17065 commitLayoutMountEffects_complete @ chunk-XBHG3ID7.js?v=bf7193f1:17976 commitLayoutEffects_begin @ chunk-XBHG3ID7.js?v=bf7193f1:17965 commitLayoutEffects @ chunk-XBHG3ID7.js?v=bf7193f1:17916 commitRootImpl @ chunk-XBHG3ID7.js?v=bf7193f1:19349 commitRoot @ chunk-XBHG3ID7.js?v=bf7193f1:19273 finishConcurrentRender @ chunk-XBHG3ID7.js?v=bf7193f1:18756 performConcurrentWorkOnRoot @ chunk-XBHG3ID7.js?v=bf7193f1:18714 workLoop @ chunk-XBHG3ID7.js?v=bf7193f1:197 flushWork @ chunk-XBHG3ID7.js?v=bf7193f1:176 performWorkUntilDeadline @ chunk-XBHG3ID7.js?v=bf7193f1:384 Show 16 more frames Show less console.js:213 React Router caught the following error during render TypeError: Cannot read properties of undefined (reading 'map') at OccupationDetailsPage (OccupationDetailsPage.jsx:52:45) at renderWithHooks (chunk-XBHG3ID7.js?v=bf7193f1:12171:26) at updateFunctionComponent (chunk-XBHG3ID7.js?v=bf7193f1:14577:28) at beginWork (chunk-XBHG3ID7.js?v=bf7193f1:15912:22) at beginWork$1 (chunk-XBHG3ID7.js?v=bf7193f1:19749:22) at performUnitOfWork (chunk-XBHG3ID7.js?v=bf7193f1:19194:20) at workLoopSync (chunk-XBHG3ID7.js?v=bf7193f1:19133:13) at renderRootSync (chunk-XBHG3ID7.js?v=bf7193f1:19112:15) at recoverFromConcurrentError (chunk-XBHG3ID7.js?v=bf7193f1:18732:28) at performConcurrentWorkOnRoot (chunk-XBHG3ID7.js?v=bf7193f1:18680:30) {componentStack: '\n at OccupationDetailsPage (http://localhost:51….vite/deps/react-router-dom.js?v=bf7193f1:4487:5)'} at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3520:5) at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4670:5) at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:3938:15) at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bf7193f1:4487:5)