nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Lifecycle issue with @arcgis/map-components-react

jvpelt

Hi,

Got a lifecycle issue in my react application I can't seem to figure out. Hopefully someone can point me in the right direction.

Situation: I've got a React SPA which has a map on several components this is working fine on the initial rendering and while interacting on the given component. The issue occurs when navigating away from the component I'll get the following errors in the console:

After these errors have been thrown the map does not behave as intended for example the expand widget no longer loads:

Initial load:

Loading a map after the errors:

I can't seem to find anything in the documentation about the need to manually clean up any references or something so any help regarding this issue will be highly appreciated

"@arcgis/core": "^4.30.9",

"@arcgis/map-components-react": "^4.30.7",

Find more posts tagged with

Accepted answers

RRubalcava

If you had a github repro, would be easier to tell. One thing you can do is add the "autoDestroyDisabled" to your components. All the map components have it.

https://developers.arcgis.com/javascript/latest/references/map-components/?path=/docs/component-reference-map--docs

From the description:

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporary hide it. If this is set, make sure to call the `destroy` method when you are done to prevent memory leaks.

All comments

DanRussell

I had a similar issue using Angular. I'm just commenting here with the text of the related warnings to help other people find this.

[esri.widgets.Expand] TypeError: Cannot read properties of null (reading 'getPosition')

"component has already been destroyed. It cannot be used again. If you meant to disconnect and reconnect a component without automatic destroy, set the autoDestroyDisabled prop."

jvpelt

Thanks! This solved the issue!

RRubalcava

If you had a github repro, would be easier to tell. One thing you can do is add the "autoDestroyDisabled" to your components. All the map components have it.

https://developers.arcgis.com/javascript/latest/references/map-components/?path=/docs/component-reference-map--docs

From the description:

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporary hide it. If this is set, make sure to call the `destroy` method when you are done to prevent memory leaks.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.