Hi,
we want to move towards react18 and we noticed a problem caused by @atlaskit/portal which is used in Modal, Tooltip and Popup. I already tried to get support via ECOHELP but they turn down that kind of support.
We still experience an issue with the current version of atlaskit when we run custom UI via tunnel. I can easily see this error when we apply some atlaskit components in our custom UI with react 18 enabled:
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removePortalContainer2 (http://localhost:8000/node_modules/.vite/deps/chunk-CTWYKIIY.js?v=a9b37d8c:55:21)
at http://localhost:8000/node_modules/.vite/deps/chunk-CTWYKIIY.js?v=a9b37d8c:97:7
at safelyCallDestroy (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:16796:13)
at commitHookEffectListUnmount (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:16923:19)
at commitPassiveUnmountInsideDeletedTreeOnFiber (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:18333:17)
at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:18295:13)
at commitPassiveUnmountEffects_begin (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:18231:19)
at commitPassiveUnmountEffects (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:18219:11)
at flushPassiveEffectsImpl (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:19542:11)
at flushPassiveEffects (http://localhost:8000/node_modules/.vite/deps/chunk-2URDYJOG.js?v=a9b37d8c:19500:22)
Also see the screenshot attached:
With recent updates of atlaskit towards precompiled CSS and reading changelog notes that react 18 support is implemented, we thought we gave it another go and try out react 18. I looked through every component’s changelog and saw updates regarding react18. At first glance this worked fine. But with some interactivity we experience serious errors that crash the UI in react 18 using strict mode during dev mode.
The example above occurs when using the Modal compontent with ModalTransition.
We use these dependencies in the custom UI
"@atlaskit/avatar": "^25.1.2",
"@atlaskit/badge": "^18.1.3",
"@atlaskit/banner": "^14.0.3",
"@atlaskit/button": "^23.2.2",
"@atlaskit/calendar": "^17.1.7",
"@atlaskit/checkbox": "^17.1.3",
"@atlaskit/css-reset": "^7.3.2",
"@atlaskit/datetime-picker": "^17.0.3",
"@atlaskit/dropdown-menu": "^16.0.3",
"@atlaskit/dynamic-table": "^18.1.4",
"@atlaskit/empty-state": "^10.0.2",
"@atlaskit/form": "^12.0.7",
"@atlaskit/icon": "^26.4.1",
"@atlaskit/inline-edit": "^15.2.3",
"@atlaskit/inline-message": "^15.3.0",
"@atlaskit/lozenge": "^13.0.0",
"@atlaskit/modal-dialog": "^14.2.5",
"@atlaskit/onboarding": "^14.2.1",
"@atlaskit/popup": "^4.3.1",
"@atlaskit/progress-bar": "^4.0.7",
"@atlaskit/radio": "^8.1.1",
"@atlaskit/range": "^9.0.4",
"@atlaskit/section-message": "^8.2.5",
"@atlaskit/select": "^20.6.2",
"@atlaskit/spinner": "^18.0.5",
"@atlaskit/tabs": "^18.1.2",
"@atlaskit/tag": "^14.0.10",
"@atlaskit/textfield": "^8.0.6",
"@atlaskit/toggle": "^15.0.6",
"@atlaskit/tokens": "^5.0.0",
"@atlaskit/tooltip": "^20.3.0",
As build tool we use vite with the react plugin.
Does anyone have an idea? This looks like a bug within @atlaskit/portal.
Kind Regards
Lars