search

img-mapper / react-img-mapper

React Component to highlight interactive zones in images
https://img-mapper.github.io/react-docs
MIT License
122 stars 39 forks source link

NextJS 15 error: Cannot read properties of undefined (reading 'length') #89

Closed teddybee closed 5 hours ago

teddybee commented 5 hours ago

Describe the bug A clear and concise description of what the bug is. I ported my app to NextJS 15.03 and the ImageMapper component shows this error: NextJS 15 error: Cannot read properties of undefined (reading 'length')

To Reproduce Steps to reproduce the behavior:

Error Stack A Error Stack of your error

hook.js:608 TypeError: Cannot read properties of undefined (reading 'length')
    at push.[project]/node_modules/react-img-mapper/dist/ImageMapper.js [app-client] (ecmascript).__spread…_a424a7._.js:395:65)
    at ImageMapper.js:287:24
    at updateMemoComponent (react-dom-client.development.js:7801:11)
    at beginWork (react-dom-client.development.js:10076:18)
    at runWithFiberInDEV (react-dom-client.development.js:543:16)
    at performUnitOfWork (react-dom-client.development.js:14985:22)
    at workLoopSync (react-dom-client.development.js:14815:41)
    at renderRootSync (react-dom-client.development.js:14793:11)
    at performWorkOnRoot (react-dom-client.development.js:14328:46)
    at performSyncWorkOnRoot (react-dom-client.development.js:15856:7)
    at flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:15718:21)
    at commitRootImpl (react-dom-client.development.js:15311:7)
    at commitRoot (react-dom-client.development.js:15171:11)
    at commitRootWhenReady (react-dom-client.development.js:14510:7)
    at performWorkOnRoot (react-dom-client.development.js:14435:17)
    at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:15842:7)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:44:48)

The above error occurred in the <div> component. It was handled by the <ErrorBoundaryHandler> error boundary. Error Component Stack
    at div (<anonymous>)
    at BuildingsMapPanel (BuildingsMapPanel.tsx:1185:3)
    at section (<anonymous>)
    at PageContainer [Server] (<anonymous>)
    at BuildingsPage [Server] (<anonymous>)
    at InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at LoadingBoundary (layout-router.tsx:466:3)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at InnerScrollAndFocusHandler (layout-router.tsx:289:3)
    at ScrollAndFocusHandler (layout-router.tsx:299:9)
    at RenderFromTemplateContext (render-from-template-context.tsx:8:10)
    at OuterLayoutRouter (layout-router.tsx:514:9)
    at InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at LoadingBoundary (layout-router.tsx:466:3)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at InnerScrollAndFocusHandler (layout-router.tsx:289:3)
    at ScrollAndFocusHandler (layout-router.tsx:299:9)
    at RenderFromTemplateContext (render-from-template-context.tsx:8:10)
    at OuterLayoutRouter (layout-router.tsx:514:9)
    at InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at LoadingBoundary (layout-router.tsx:466:3)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at InnerScrollAndFocusHandler (layout-router.tsx:289:3)
    at ScrollAndFocusHandler (layout-router.tsx:299:9)
    at RenderFromTemplateContext (render-from-template-context.tsx:8:10)
    at OuterLayoutRouter (layout-router.tsx:514:9)
    at InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundErrorBoundary (not-found-boundary.tsx:33:5)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at LoadingBoundary (layout-router.tsx:466:3)
overrideMethod  @   hook.js:608

Expected behavior A clear and concise description of what you expected to happen. Run without error and show the map.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

teddybee commented 5 hours ago

Sorry, the root cause was this part of code on the page:

useLayoutEffect(() => {
    if (ref.current) {
      setWidth(ref.current.clientWidth)
      setHeight(ref.current.clientHeight)
    }
  }, [])

The component itself is working with constant width and height