Remix 1.16.0-pre.0 React 17 cannot destructure property useLoaderData is undefined during Client Side routing #6203
Comments
|
I've tested this again with Remix versions
|
|
@kevinbailey25 I just gave this a try on 1.16.0-pre.1 / React 17, I don't see any issues. |
machour
added
the
needs-response
|
@machour thanks for looking at this. Sorry this didn't show the error or my instructions weren't as clear. Here's a repo with the reproduction. My main machine is running Windows 10 and I made this one on my mac and has the same issue. I've tried to include more details in the readme.md https://github.com/kevinbailey25/remix-16pre-react-17 Please let me know how else I can help. |
|
@machour I just upgraded this repo to 1.16.0-pre.6 and it seems like the error is no longer happening. Hopefully that means my issue got fixed with one of the other prereleases. I will do more testing tomorrow or Monday and fully confirm. In the meantime, thanks for all your help. I'll leave this repo at pre.1 in case you are curious to look. |
github-actions
bot
removed
the
needs-response
|
@machour tested several different projects on |
|
This is happening again to me, where I have remix 2.1.0 and react 18 :/ |
What version of Remix are you using?
1.16.0-pre.0
Are all your remix dependencies & dev-dependencies using the same version?
Steps to Reproduce
npx create-remix@1.16.0-pre.0react,react-dom,@types/reactand@types/react-domto^17.0.2.json({ test: 'data' })const { test } = useLoaderData<typeof loader>()Linkin your_index.tsxto navigate to your route.npm run dev_indexpage and click your link to do a client side navigation to your new route that loads data.Expected Behavior
Route renders with the data with no console errors or weird rerendering
Actual Behavior
Page re-renders oddly and appears to work, but console log shows
caught TypeError: Cannot destructure property 'test' of 'useLoaderData(...)' as it is undefined. at Test (test.tsx:9:10) at renderWithHooks (react-dom.development.js:14985:18) at mountIndeterminateComponent (react-dom.development.js:17811:13) at beginWork (react-dom.development.js:19049:16) at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16) at invokeGuardedCallback (react-dom.development.js:4056:31) at beginWork$1 (react-dom.development.js:23964:7) at performUnitOfWork (react-dom.development.js:22776:12) at workLoopSync (react-dom.development.js:22707:5) Test @ test.tsx:9 renderWithHooks @ react-dom.development.js:14985 mountIndeterminateComponent @ react-dom.development.js:17811 beginWork @ react-dom.development.js:19049 callCallback2 @ 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 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21893 dispatchAction @ react-dom.development.js:16139 (anonymous) @ browser.js:107 (anonymous) @ router.ts:936 updateState @ router.ts:936 completeNavigation @ router.ts:1005 startNavigation @ router.ts:1312 await in startNavigation (async) navigate @ router.ts:1134 (anonymous) @ hooks.tsx:965 (anonymous) @ index.tsx:852 handleClick @ index.tsx:491 callCallback2 @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070 executeDispatch @ react-dom.development.js:8243 processDispatchQueueItemsInOrder @ react-dom.development.js:8275 processDispatchQueue @ react-dom.development.js:8288 dispatchEventsForPlugins @ react-dom.development.js:8299 (anonymous) @ react-dom.development.js:8508 batchedEventUpdates$1 @ react-dom.development.js:22396 batchedEventUpdates @ react-dom.development.js:3745 dispatchEventForPluginEventSystem @ react-dom.development.js:8507 attemptToDispatchEvent @ react-dom.development.js:6005 dispatchEvent @ react-dom.development.js:5924 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 discreteUpdates$1 @ react-dom.development.js:22413 discreteUpdates @ react-dom.development.js:3756 dispatchDiscreteEvent @ react-dom.development.js:5889 react_devtools_backend_compact.js:2367 The above error occurred in the <Test> component: at Test (http://localhost:3000/build/routes/test-3PWT66UZ.js:27:20) at RemixRoute (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:8945:3) at RenderedRoute (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:6507:5) at Outlet (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:6747:26) at body at html at App at RemixRoute (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:8945:3) at RenderedRoute (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:6507:5) at RenderErrorBoundary (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:6898:9) at DataRoutes (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:6741:5) at Router (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:6751:15) at RouterProvider (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:6691:5) at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:8530:5) at RemixBrowser (http://localhost:3000/build/_shared/chunk-NIUBDIDJ.js:10086:40) React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.The text was updated successfully, but these errors were encountered: