Displaying Multiple KMLs

[lewdev]

Currently on:

• React 18
• React Leaflet 4.1.0
• react-leaflet-kml 2.1.0

When attempting to add multiple <ReactLeafletKml> components, the app crashes with this error:

TypeError: Cannot read properties of undefined (reading 'length')
   at areHookInputsEqual
  ...

It seems to be an error with hooks within the ReactLeafletKml, but I could be wrong.

This worked previously on:

• React 16.13.1
• React Leaflet 3.0.2
• react-leaflet-kml 2.0.2

I don't really want to revert to an older version if possible.

[aviklai]

Hi,

Can you please add a codesandbox with the error? this is what I tried and it looks good:
https://codesandbox.io/s/basic-usage-react-leaflet-v3-forked-vucvbo

[lewdev]

It might be an issue with other hooks and it's going to be hard to recreate the problem in Sandbox as I am having this issue in a fairly large app with many moving parts. It could be an issue elsewhere. I got this warning:

Warning: React has detected a change in the order of Hooks called ForwardRef(ContainerComponent)

I also got this error for each KML I have loaded:

prevDeps is undefined

The issue occurs when I loaded 4 KMLs. Again, I suspect the issue lies elsewhere. I've been stumped on this issue for a while, so I apologize if this caused you to waste any time.

[lewdev]

Sorry to respond so late on this. Thank you for the codesandbox. I used it to recreate the error I was stuck on and eventually fixed.

https://codesandbox.io/s/basic-usage-react-leaflet-v3-unique-key-g4w7p3?file=/src/index.tsx

I had basically what this sandbox has, an array of KMLs stored with an id which was unique. However, when I added more than one, I got the prevDeps is undefined error, which is recreated in this sandbox. My solution was to generate new unique keys on every reload of the list and not reuse the same ones.

What confused me was that the KMLs never changed, so the keys should stay the same with no problems, but that's not really the case. I'm not sure if this would be considered a bug, but I hope you found this useful. If it isn't, go ahead a close it.

[pmrzygweb]

I am experiencing the same issue.

Warning: React has detected a change in the order of Hooks called by ForwardRef(ContainerComponent). This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useRef                     useRef
3. useEffect                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at ContainerComponent (http://localhost:3000/static/js/bundle.js:81456:9)
    at div
    at MapContainerComponent (http://localhost:3000/static/js/bundle.js:86682:5)
    at div
    at div
    at Home (http://localhost:3000/static/js/bundle.js:6190:72)
    at div
    at div
    at div
    at Run (http://localhost:3000/static/js/bundle.js:8261:98)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:70014:5)
    at Routes (http://localhost:3000/static/js/bundle.js:70436:5)
    at Router
    at App (http://localhost:3000/static/js/bundle.js:1218:80)
    at Router (http://localhost:3000/static/js/bundle.js:70374:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:68732:5)
    at Provider (http://localhost:3000/static/js/bundle.js:66095:5)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnOnHookMismatchInDev @ react-dom.development.js:16220
updateHookTypesDev @ react-dom.development.js:16179
useRef @ react-dom.development.js:17905
useRef @ react.development.js:1630
useMutableLeafletElement @ element.js:20
useLayer @ layer.js:22
ContainerComponent @ component.js:6
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:16249 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at areHookInputsEqual (react-dom.development.js:16249:1)
    at updateEffectImpl (react-dom.development.js:17078:1)
    at updateEffect (react-dom.development.js:17098:1)
    at Object.useEffect (react-dom.development.js:17862:1)
    at useEffect (react.development.js:1634:1)
    at useMutableLeafletElement (element.js:22:1)
    at useLayer (layer.js:22:1)
    at ContainerComponent (component.js:6:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
areHookInputsEqual @ react-dom.development.js:16249
updateEffectImpl @ react-dom.development.js:17078
updateEffect @ react-dom.development.js:17098
useEffect @ react-dom.development.js:17862
useEffect @ react.development.js:1634
useMutableLeafletElement @ element.js:22
useLayer @ layer.js:22
ContainerComponent @ component.js:6
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:16249 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at areHookInputsEqual (react-dom.development.js:16249:1)
    at updateEffectImpl (react-dom.development.js:17078:1)
    at updateEffect (react-dom.development.js:17098:1)
    at Object.useEffect (react-dom.development.js:17862:1)
    at useEffect (react.development.js:1634:1)
    at useMutableLeafletElement (element.js:22:1)
    at useLayer (layer.js:22:1)
    at ContainerComponent (component.js:6:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
areHookInputsEqual @ react-dom.development.js:16249
updateEffectImpl @ react-dom.development.js:17078
updateEffect @ react-dom.development.js:17098
useEffect @ react-dom.development.js:17862
useEffect @ react.development.js:1634
useMutableLeafletElement @ element.js:22
useLayer @ layer.js:22
ContainerComponent @ component.js:6
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <ForwardRef(ContainerComponent)> component:

    at ContainerComponent (http://localhost:3000/static/js/bundle.js:81456:9)
    at div
    at MapContainerComponent (http://localhost:3000/static/js/bundle.js:86682:5)
    at div
    at div
    at Home (http://localhost:3000/static/js/bundle.js:6190:72)
    at div
    at div
    at div
    at Run (http://localhost:3000/static/js/bundle.js:8261:98)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:70014:5)
    at Routes (http://localhost:3000/static/js/bundle.js:70436:5)
    at Router
    at App (http://localhost:3000/static/js/bundle.js:1218:80)
    at Router (http://localhost:3000/static/js/bundle.js:70374:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:68732:5)
    at Provider (http://localhost:3000/static/js/bundle.js:66095:5)

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.
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
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:16249 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at areHookInputsEqual (react-dom.development.js:16249:1)
    at updateEffectImpl (react-dom.development.js:17078:1)
    at updateEffect (react-dom.development.js:17098:1)
    at Object.useEffect (react-dom.development.js:17862:1)
    at useEffect (react.development.js:1634:1)
    at useMutableLeafletElement (element.js:22:1)
    at useLayer (layer.js:22:1)
    at ContainerComponent (component.js:6:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)

@lewdev your codesandbox code crashes when click add kml button FYI

[lewdev]

@lewdev your codesandbox code crashes when click add kml button

Yes, I am recreating the bug so the devs can see what's causing the issue.

The problem isn't so much the devs fault, rather it's the new version of React where the key attribute seems to adhere more strictly to its intent on being a unique element that hasn't changed.

Here's the fixed version of my "error recreated":
https://codesandbox.io/s/basic-usage-react-leaflet-v3-unique-key-fix-7jqxll

On every render, a new unique key will be assigned to the ReactLeafletKml component.

{kmlList.map((item) => {
  const key = uniqueId();
  return <ReactLeafletKml key={key} kml={item.kml} />
})}

@pmrzygweb, I saw similar error messages as yours but I'm not sure if the new key rules for React were the cause of it.

[pmrzygweb]

@lewdev I used only single item however this error happened, when I remove StrictMode, it seems to be rendering but layout is broken for me.

[lewdev]

I think you should at least show a snippet of code because it could simply not have to do with ReactLeafletKml.

Have you read this stackoverflow Question? https://stackoverflow.com/questions/57397395/react-has-detected-a-change-in-the-order-of-hooks-but-hooks-seem-to-be-invoked

The error "React has detected a change in the order of Hooks called by" occurs when we conditionally call a hook or return early before all hooks have run. To solve the error, move all hooks to the top level of the function component and don't use hooks inside conditions.

[aviklai]

@pmrzygweb @lewdev Hi,

I released a new version with the fix - version 2.1.1.
Can you please try it out:
Here is a working codesandbox with adding multiple kmls:
https://codesandbox.io/s/basic-usage-react-leaflet-v3-unique-key-forked-wl2iu0

[pmrzygweb]

@aviklai Does this library support latest node version?
I tried new version and can't see the error however layout is broken with node v18.12.1
I confirmed that it works with node 16.x

[aviklai]

@pmrzygweb Hi, didn't check on node v18.12.1.
From your previous screenshot - it looks like there is a layout issue in leaflet itself.
Unfortunately, I want have time to check the support for node v18.12.1 so you are welcome to submit a PR if you identify the issue.