diff --git a/.changeset/popular-squids-kneel.md b/.changeset/popular-squids-kneel.md new file mode 100644 index 00000000000..adf2bf0e0d4 --- /dev/null +++ b/.changeset/popular-squids-kneel.md @@ -0,0 +1,9 @@ +--- +'@clerk/clerk-js': patch +--- + +The [issue #1557](https://github.com/clerkinc/javascript/issues/1557) uncovered that when using `@clerk/nextjs` together with `next-intl` the error `"Failed to execute 'removeChild' on 'Node'"` was thrown. + +That error came from `@floating-ui/react` which `@clerk/clerk-js` used under the hood. Its version was upgraded from `0.19.0` to `0.25.4` to fix this error. + +This error is probably not isolated to `next-intl` so if you encountered a similar error in the past, try upgrading. diff --git a/package-lock.json b/package-lock.json index d7803266d7b..4b8560b4c7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4448,25 +4448,29 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz", - "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==" + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz", + "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==", + "dependencies": { + "@floating-ui/utils": "^0.1.1" + } }, "node_modules/@floating-ui/dom": { - "version": "1.2.9", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz", - "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.2.tgz", + "integrity": "sha512-6ArmenS6qJEWmwzczWyhvrXRdI/rI78poBcW0h/456+onlabit+2G+QxHx5xTOX60NBJQXjsCLFbW2CmsXpUog==", "dependencies": { - "@floating-ui/core": "^1.2.6" + "@floating-ui/core": "^1.4.1", + "@floating-ui/utils": "^0.1.1" } }, "node_modules/@floating-ui/react": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz", - "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==", + "version": "0.25.4", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.25.4.tgz", + "integrity": "sha512-lWRQ/UiTvSIBxohn0/2HFHEmnmOVRjl7j6XcRJuLH0ls6f/9AyHMWVzkAJFuwx0n9gaEeCmg9VccCSCJzbEJig==", "dependencies": { - "@floating-ui/react-dom": "^1.2.2", - "aria-hidden": "^1.1.3", + "@floating-ui/react-dom": "^2.0.2", + "@floating-ui/utils": "^0.1.1", "tabbable": "^6.0.1" }, "peerDependencies": { @@ -4475,17 +4479,22 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz", - "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", + "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", "dependencies": { - "@floating-ui/dom": "^1.2.1" + "@floating-ui/dom": "^1.5.1" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, + "node_modules/@floating-ui/utils": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.2.tgz", + "integrity": "sha512-ou3elfqG/hZsbmF4bxeJhPHIf3G2pm0ujc39hYEZrfVqt7Vk/Zji6CXc3W0pmYM8BW1g40U+akTl9DKZhFhInQ==" + }, "node_modules/@gatsbyjs/parcel-namer-relative-to-cwd": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.12.0.tgz", @@ -10569,17 +10578,6 @@ "sprintf-js": "~1.0.2" } }, - "node_modules/aria-hidden": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz", - "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==", - "dependencies": { - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -33027,7 +33025,7 @@ "@clerk/types": "^3.51.0", "@emotion/cache": "11.10.5", "@emotion/react": "11.10.5", - "@floating-ui/react": "0.19.0", + "@floating-ui/react": "0.25.4", "@zxcvbn-ts/core": "2.2.1", "@zxcvbn-ts/language-common": "3.0.2", "browser-tabs-lock": "1.2.15", diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index 40b2fe4bb11..89e5980fdb0 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -46,7 +46,7 @@ "@clerk/types": "^3.51.0", "@emotion/cache": "11.10.5", "@emotion/react": "11.10.5", - "@floating-ui/react": "0.19.0", + "@floating-ui/react": "0.25.4", "@zxcvbn-ts/core": "2.2.1", "@zxcvbn-ts/language-common": "3.0.2", "browser-tabs-lock": "1.2.15", diff --git a/packages/clerk-js/src/ui/hooks/usePopover.ts b/packages/clerk-js/src/ui/hooks/usePopover.ts index af52b3e668e..c4c7642ab67 100644 --- a/packages/clerk-js/src/ui/hooks/usePopover.ts +++ b/packages/clerk-js/src/ui/hooks/usePopover.ts @@ -1,10 +1,10 @@ -import type { UseFloatingProps } from '@floating-ui/react'; +import type { UseFloatingOptions } from '@floating-ui/react'; import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useFloatingNodeId } from '@floating-ui/react'; import React, { useEffect } from 'react'; type UsePopoverProps = { defaultOpen?: boolean; - placement?: UseFloatingProps['placement']; + placement?: UseFloatingOptions['placement']; offset?: Parameters[0]; autoUpdate?: boolean; outsidePress?: boolean | ((event: MouseEvent) => boolean); @@ -22,7 +22,7 @@ export const usePopover = (props: UsePopoverProps = {}) => { const { bubbles = true, outsidePress } = props; const [isOpen, setIsOpen] = React.useState(props.defaultOpen || false); const nodeId = useFloatingNodeId(); - const { update, reference, floating, strategy, x, y, context } = useFloating({ + const { update, refs, strategy, x, y, context } = useFloating({ open: isOpen, onOpenChange: setIsOpen, nodeId, @@ -30,6 +30,10 @@ export const usePopover = (props: UsePopoverProps = {}) => { placement: props.placement || 'bottom-start', middleware: [offset(props.offset || 6), flip(), shift()], }); + // Names are aliased because in @floating-ui/react-dom@2.0.0 the top-level elements were removed + // This keeps the API shape for consumers of usePopover + // @see https://github.com/floating-ui/floating-ui/releases/tag/%40floating-ui%2Freact-dom%402.0.0 + const { setReference: reference, setFloating: floating } = refs; useDismiss(context, { bubbles,