have tried using react-optimized-image in reactjs.
have followed the required procedure as per - https://www.npmjs.com/package/react-optimized-image
but getting below error.
react-dom.development.js:16543 Uncaught Error: Babel plugin 'react-optimized-image/plugin' not
installed or this component could not be recognized by it.
at Img (Img.js:119)
at mountIndeterminateComponent (react-dom.development.js:13380)
at beginWork (react-dom.development.js:13820)
at performUnitOfWork (react-dom.development.js:15863)
at workLoop (react-dom.development.js:15902)
at renderRoot (react-dom.development.js:15942)
at performWorkOnRoot (react-dom.development.js:16560)
at performWork (react-dom.development.js:16482)
at performSyncWork (react-dom.development.js:16454)
at requestWork (react-dom.development.js:16354)
please advise...
Related
When today morning opening my current working project and run on dev server on chrome I got this "Error: Hydration failed because the initial UI does not match what was rendered on the server". Then I tried so many solutions mentioned in nextjs documents and stackoverflow. But I coundn't find a working solution. Then I just created new next js project and tried and got the same error. Error was,
react-dom.development.js?160d:94 Warning: Expected server HTML to contain a matching <div> in <body>.
at div
at InnerLayoutRouter (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:124:11)
at RedirectErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:303:9)
at RedirectBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:310:11)
at NotFoundErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:339:9)
at NotFoundBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:346:11)
at LoadingBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:258:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:40:11)
at RenderFromTemplateContext (webpack-internal:///./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
at OuterLayoutRouter (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:18:11)
at body
at html
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:53:9)
at HotReload (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
at Router (webpack-internal:///./node_modules/next/dist/client/components/app-router.js:97:11)
at ErrorBoundaryHandler (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:28:9)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:40:11)
at AppRouter
at ServerRoot (webpack-internal:///./node_modules/next/dist/client/app-index.js:113:11)
at RSCComponent
at Root (webpack-internal:///./node_modules/next/dist/client/app-index.js:130:11)
printWarning # react-dom.development.js?160d:94
react-dom.development.js?160d:14706 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js?160d:14706:1)
at tryToClaimNextHydratableInstance (react-dom.development.js?160d:14756:1)
at updateHostComponent (react-dom.development.js?160d:22897:1)
at beginWork (react-dom.development.js?160d:24709:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?160d:4246:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?160d:4295:1)
at invokeGuardedCallback (react-dom.development.js?160d:4359:1)
at beginWork$1 (react-dom.development.js?160d:31944:1)
at performUnitOfWork (react-dom.development.js?160d:30853:1)
at workLoopConcurrent (react-dom.development.js?160d:30839:1)
at renderRootConcurrent (react-dom.development.js?160d:30797:1)
at performConcurrentWorkOnRoot (react-dom.development.js?160d:29844:1)
at workLoop (index.js?82e4:10:3922)
at flushWork (index.js?82e4:10:3630)
at MessagePort.performWorkUntilDeadline (index.js?82e4:10:1812)
react-dom.development.js?160d:94 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
printWarning # react-dom.development.js?160d:94
3react-dom.development.js?160d:31301 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js?160d:14706:1)
at tryToClaimNextHydratableInstance (react-dom.development.js?160d:14756:1)
at updateHostComponent (react-dom.development.js?160d:22897:1)
at beginWork (react-dom.development.js?160d:24709:1)
at beginWork$1 (react-dom.development.js?160d:31919:1)
at performUnitOfWork (react-dom.development.js?160d:30853:1)
at workLoopConcurrent (react-dom.development.js?160d:30839:1)
at renderRootConcurrent (react-dom.development.js?160d:30797:1)
at performConcurrentWorkOnRoot (react-dom.development.js?160d:29844:1)
at workLoop (index.js?82e4:10:3922)
at flushWork (index.js?82e4:10:3630)
at MessagePort.performWorkUntilDeadline (index.js?82e4:10:1812)
react-dom.development.js?160d:22844 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (react-dom.development.js?160d:22844:1)
at beginWork (react-dom.development.js?160d:24692:1)
at beginWork$1 (react-dom.development.js?160d:31919:1)
at performUnitOfWork (react-dom.development.js?160d:30853:1)
at workLoopSync (react-dom.development.js?160d:30689:1)
at renderRootSync (react-dom.development.js?160d:30654:1)
at recoverFromConcurrentError (react-dom.development.js?160d:29970:1)
at performConcurrentWorkOnRoot (react-dom.development.js?160d:29857:1)
at workLoop (index.js?82e4:10:3922)
at flushWork (index.js?82e4:10:3630)
at MessagePort.performWorkUntilDeadline (index.js?82e4:10:1812)
My default browser is chrome and then I tried in edge and brave browser and amazingly they don't give me those errors.
Code sandbox for testing project: https://codesandbox.io/p/github/dwalker93/next13/draft/condescending-frog
In chrome browser
In Edge Browser
after spending few hours, i found the problem and that was a chrome extension doing that.
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'm following a Next.js/Firebase course from Fireship and I'm running into some issues. This is the error I see 'in' localhost:3000/admin/my-first-article:
Unhandled Runtime Error
TypeError: path.split is not a function
Call Stack
get
node_modules/react-hook-form/dist/index.esm.mjs (33:0)
register
node_modules/react-hook-form/dist/index.esm.mjs (1850:0)
commitAttachRef
node_modules/react-dom/cjs/react-dom.development.js (23543:0)
commitLayoutEffectOnFiber
node_modules/react-dom/cjs/react-dom.development.js (23401:0)
commitLayoutMountEffects_complete
node_modules/react-dom/cjs/react-dom.development.js (24578:0)
commitLayoutEffects_begin
node_modules/react-dom/cjs/react-dom.development.js (24564:0)
commitLayoutEffects
node_modules/react-dom/cjs/react-dom.development.js (24502:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26779:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26638:0)
finishConcurrentRender
node_modules/react-dom/cjs/react-dom.development.js (25937:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25765:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)
Some more details
I'm using the react-hook-form npm package and I need to set a ref attribute on an input tag. However, I keep getting this error: link to Imgur. I'm not using TypeScript. I do not think it's a TypeScript error. (Update: I have an .eslintrc.json file. Could that be related? I don't have a lot of knowledge yet about ESLint)
Good to know: I found this Stack Overflow answer but unfortunately, the solution that I found in that article did not resolve mine :( (Getting Uncaught TypeError: path.split is not a function in react)
So the errors I'm experiencing are actually two-fold. On the one hand I'm getting the 'path.split is not a function' error and on the other the error with the ref attribute. I think they're somehow related, but for the life of me I can't figure out what it could be. I think the error could be in either /pages/admin/[slug].js or /pages/admin/index.js.
GitHub repository (up to date): https://github.com/YinChuRijnaard/dev.chu
Thank you for your time, and for helping out a noob!!! :)
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.