When i am importing { useNavigate } from "react-router-dom" my app is working fine but when i am doing this let navigate = useNavigate(); i am getting error and my project not running. I am getting this Error
react_devtools_backend.js:4026 The above error occurred in the <App> component:
at App (http://localhost:3000/main.275edd721dcd59139133.hot-update.js:41:84)
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.
overrideMethod # react_devtools_backend.js:4026
logCapturedError # react-dom.development.js:18687
update.callback # react-dom.development.js:18720
callCallback # react-dom.development.js:13923
commitUpdateQueue # react-dom.development.js:13944
commitLayoutEffectOnFiber # react-dom.development.js:23391
commitLayoutMountEffects_complete # react-dom.development.js:24688
commitLayoutEffects_begin # react-dom.development.js:24674
commitLayoutEffects # react-dom.development.js:24612
commitRootImpl # react-dom.development.js:26823
commitRoot # react-dom.development.js:26682
performSyncWorkOnRoot # react-dom.development.js:26117
flushSyncCallbacks # react-dom.development.js:12042
flushSync # react-dom.development.js:26201
scheduleRefresh # react-dom.development.js:27795
renderer.scheduleRefresh # react_devtools_backend.js:6514
(anonymous) # react-refresh-runtime.development.js:304
performReactRefresh # react-refresh-runtime.development.js:293
(anonymous) # RefreshUtils.js:85
setTimeout (async)
enqueueUpdate # RefreshUtils.js:83
executeRuntime # RefreshUtils.js:243
$ReactRefreshModuleRuntime$ # App.js:72
./src/App.js # App.js:72
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
_requireSelf # hot module replacement:102
apply # jsonp chunk loading:444
(anonymous) # hot module replacement:344
internalApply # hot module replacement:342
(anonymous) # hot module replacement:279
waitForBlockingPromises # hot module replacement:233
(anonymous) # hot module replacement:277
Promise.then (async)
(anonymous) # hot module replacement:276
Promise.then (async)
(anonymous) # hot module replacement:256
Promise.then (async)
hotCheck # hot module replacement:247
check # dev-server.js:13
(anonymous) # dev-server.js:55
emit # events.js:153
reloadApp # reloadApp.js:46
warnings # index.js:227
(anonymous) # socket.js:60
client.onmessage # WebSocketClient.js:50
Please any one tell why this is happening with me.
Actually I am not using the router that's why i am getting this error when i have used router in my project my project has been started.if you are also facing this issues please use router.
Related
I'm getting this error on every render. The stack trace below started with a mouse §click. The problem is I have no clue how to approach this. What I gather from this trace is:
It seems to happen inside React
Apparently it happens while React is reconciling the virtual DOM and the real DOM?
Somehow React Navigation has hooked into this process and is complaining.
And here it ends for me.
What am I using:
Expo Go SDK 46
React Native Web 0.18.7
Reactflow 11.2.0
So how do I go about debugging this? BTW I did wrap everything in a navigation container.
console.<computed> # index.js:1
error # react-native-logs.fx.ts:34
overrideMethod # react_devtools_backend.js:4026
i # VM8448:10
t.onCommitFiberRoot.t.onCommitFiberRoot # VM8448:10
onCommitRoot # react-dom.development.js:4875
commitRootImpl # react-dom.development.js:26709
commitRoot # react-dom.development.js:26517
performSyncWorkOnRoot # react-dom.development.js:25956
flushSyncCallbacks # react-dom.development.js:11982
flushSyncCallbacksOnlyInLegacyMode # react-dom.development.js:11961
scheduleUpdateOnFiber # react-dom.development.js:25326
dispatchReducerAction # react-dom.development.js:17269
listener # index.js:138
(anonymous) # index.js:18
setState # index.js:17
(anonymous) # index.ts:21
setNodes # slice.ts:120
(anonymous) # SlideEditorCanvas.tsx:139
(anonymous) # index.js:2308
call # dispatch.js:57
emit # zoom.js:219
start # zoom.js:198
mousedowned # zoom.js:283
(anonymous) # on.js:3
I want to edit the react-js-cron package (switching antd with bootstrap). I followed this tutorial and the link worked. I can see the symbolic link in the IDE and if I do changes in the local react-js-cron package it is being reflected in the other. But when I load the test app (without any changes) in the react-js-cron package and just the symbolic link it throws an error:
Uncaught TypeError: Cannot read properties of null (reading 'useRef')
at useRef (react.development.js:1630:1)
at Cron (Cron.js:45:1)
at renderWithHooks (react-dom.development.js:12740:1)
at mountIndeterminateComponent (react-dom.development.js:14670:1)
at beginWork (react-dom.development.js:15194:1)
at performUnitOfWork (react-dom.development.js:18780:1)
at workLoop (react-dom.development.js:18820:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:149:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199:1)
at invokeGuardedCallback (react-dom.development.js:256:1)
useRef # react.development.js:1630
Cron # Cron.js:45
renderWithHooks # react-dom.development.js:12740
mountIndeterminateComponent # react-dom.development.js:14670
beginWork # react-dom.development.js:15194
performUnitOfWork # react-dom.development.js:18780
workLoop # react-dom.development.js:18820
callCallback # react-dom.development.js:149
invokeGuardedCallbackDev # react-dom.development.js:199
invokeGuardedCallback # react-dom.development.js:256
replayUnitOfWork # react-dom.development.js:18052
renderRoot # react-dom.development.js:18936
performWorkOnRoot # react-dom.development.js:19800
performWork # react-dom.development.js:19712
performSyncWork # react-dom.development.js:19686
requestWork # react-dom.development.js:19555
scheduleWork # react-dom.development.js:19364
scheduleRootUpdate # react-dom.development.js:20032
updateContainerAtExpirationTime # react-dom.development.js:20060
updateContainer # react-dom.development.js:20117
ReactRoot.render # react-dom.development.js:20413
(anonymous) # react-dom.development.js:20550
unbatchedUpdates # react-dom.development.js:19915
legacyRenderSubtreeIntoContainer # react-dom.development.js:20546
render # react-dom.development.js:20615
./src/index.js # index.js:14
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react-dom.development.js:16638 The above error occurred in the <Cron> component:
in Cron (at App.js:26)
in header (at App.js:13)
in div (at App.js:12)
in App (at src/index.js:15)
I didn't do any changes, how can this throw an error? I did downgrade my app's react version to 16.8, the min dependency in react-js-cron but didn't help.
To clarify:
I created an app with create react app: npx create-react-app my-test-proj-cron && npm i --save react-js-cron; worked, I can use the package in the UI
git clone https://github.com/xrutayisire/react-js-cron.git; then inside that folder I did npm i && npm build && yarn link
Then I went into the my-test-proj-cron folder and linked it with yarn link "react-js-cron"
After this, I'm getting the error. Shouldn't my-test-proj-cron/node_modules/react-js-cron and the locally checked out react-js-cron be the same? why does it throw an error then?
I'm getting the error "Uncaught TypeError: Cannot read property 'yMax' of undefined" when adding text to a three.js scene using React-three/fiber. I've successfully rendered other geometries using the same function (apart from textgeometry and font).
My first issue was using TextGeometry without an extend (as TextGeometry is no longer affiliated with the Three.js namespace). This removed the error of unrecognized textGeometry.
Now my error is reading 'yMax' in the textGeometry component.
I've created a CodeSandBox for this issue here. The intended function is that when the scene (blue) is clicked, a new 3D text object should be rendered.
I noticed this question was asked 4 years ago, yet I am asking again because the documentation has changed a lot and that question used vanilla Three.js whereas I'm using #react-three/fiber.
The complete error messages from the Chrome Developer Console are below:
The above error occurred in the <textGeometry> component:
at textGeometry
at mesh
at Text (http://localhost:3000/3d-search/static/js/bundle.js:113:15)
at Objects (http://localhost:3000/3d-search/static/js/bundle.js:361:5)
at Provider (http://localhost:3000/3d-search/static/js/bundle.js:783:5)
at Scene (http://localhost:3000/3d-search/static/js/bundle.js:402:80)
at Suspense
at ErrorBoundary (http://localhost:3000/3d-search/static/js/bundle.js:1596:5)
at Provider (http://localhost:3000/3d-search/static/js/bundle.js:3539:5)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
overrideMethod # react_devtools_backend.js:4026
logCapturedError # react-reconciler.development.js:9747
callback # react-reconciler.development.js:9815
callCallback # react-reconciler.development.js:4279
commitUpdateQueue # react-reconciler.development.js:4300
commitLayoutEffectOnFiber # react-reconciler.development.js:14877
commitLayoutMountEffects_complete # react-reconciler.development.js:16290
commitLayoutEffects_begin # react-reconciler.development.js:16276
commitLayoutEffects # react-reconciler.development.js:16214
commitRootImpl # react-reconciler.development.js:18945
commitRoot # react-reconciler.development.js:18811
finishConcurrentRender # react-reconciler.development.js:17990
performConcurrentWorkOnRoot # react-reconciler.development.js:17907
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533
2FontLoader.js:89 Uncaught TypeError: Cannot read properties of undefined (reading 'yMax')
at createPaths (FontLoader.js:89:1)
at Font.generateShapes (FontLoader.js:71:1)
at new TextGeometry (TextGeometry.js:34:1)
at createInstance (index-212b30d8.esm.js:871:1)
at completeWork (react-reconciler.development.js:10851:1)
at completeUnitOfWork (react-reconciler.development.js:18725:1)
at performUnitOfWork (react-reconciler.development.js:18697:1)
at workLoopSync (react-reconciler.development.js:18597:1)
at renderRootSync (react-reconciler.development.js:18565:1)
at recoverFromConcurrentError (react-reconciler.development.js:17948:1)
createPaths # FontLoader.js:89
generateShapes # FontLoader.js:71
TextGeometry # TextGeometry.js:34
createInstance # index-212b30d8.esm.js:871
completeWork # react-reconciler.development.js:10851
completeUnitOfWork # react-reconciler.development.js:18725
performUnitOfWork # react-reconciler.development.js:18697
workLoopSync # react-reconciler.development.js:18597
renderRootSync # react-reconciler.development.js:18565
recoverFromConcurrentError # react-reconciler.development.js:17948
performConcurrentWorkOnRoot # react-reconciler.development.js:17848
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533
react_devtools_backend.js:4026 The above error occurred in the <ForwardRef(Canvas)> component:
at Canvas (http://localhost:3000/3d-search/static/js/bundle.js:3867:5)
at App
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.
I started following the demo at https://youtu.be/NLN-q47uPo0 and ran into the (almost) identical error shown at https://youtu.be/NLN-q47uPo0?t=2880 . Anyone know the cause and resolution for it? It appears as if the data storage has not been set up, but the presenter ran another version of the same app that worked.
The app is a plain vanilla React app with Amplify data and content defined (and sync'ed). When trying to display the collection, I get the following error in console. Note that 'device' is the model I have defined in Amplify Studio (equivalent of 'recipe' in the demo above):
Uncaught TypeError: Cannot set properties of undefined (setting 'device')
at datastore.ts:396:1
at Array.forEach (<anonymous>)
at initializeInstance (datastore.ts:392:1)
at datastore.ts:408:1
at produce (immerClass.ts:115:1)
at Device (datastore.ts:405:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
(anonymous) # datastore.ts:396
initializeInstance # datastore.ts:392
(anonymous) # datastore.ts:408
produce # immerClass.ts:115
Device # datastore.ts:405
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
(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
_aws_amplify_datastore__WEBPACK_IMPORTED_MODULE_3__.DataStore.observeQuery.subscribe.a.items # useDataStore.tsx:29
...
I ran into the same problem when trying to use the same name (e.g. Recipe) for the data model and UI component.
Fixed it by changing one of them.
I'm getting the following 2 errors with my React Native project, using Expo in the Simulator.
Can anyone shed any light on what I should be looking to fix? I've seen a couple of people with similar 'undefined' issues but I was unable to a gain a solution from them. I'm not even sure which file I should be looking at! ExceptionsManager.js is a file inside 'node_modules/react-native' so does that mean anything? Any ideas?
Many thanks.
Cannot read property 'func' of undefined - ExceptionsManager.js:65
handleException # ExceptionsManager.js:65
handleError # InitializeCore.js:106
reportFatalError # error-guard.js:46
guardedLoadModule # require.js:133
_require # require.js:118
(anonymous) # config.json:1
executeApplicationScript # debuggerWorker.js:40
(anonymous) # debuggerWorker.js:65
Module AppRegistry is not a registered callable module (calling runApplication) - ExceptionsManager.js:65
handleException # ExceptionsManager.js:65
handleError # InitializeCore.js:106
reportFatalError # error-guard.js:46
__guard # MessageQueue.js:267
callFunctionReturnFlushedQueue # MessageQueue.js:115
(anonymous) # debuggerWorker.js:72