From 31b120896a8f0ed86a89c4d7298fb41ccac36180 Mon Sep 17 00:00:00 2001 From: Jorge Padilla Date: Wed, 9 Aug 2023 05:18:01 -0500 Subject: [PATCH] fix: useIdWithFallback for react 17 and lower (#122) * fix: fix useIdWithFallback for react 17 * fix: use toString() webpack exportPresence workaround --------- Co-authored-by: Michael David Kuckuk <8076094+LBBO@users.noreply.github.com> --- src/common/useIdWithFallback.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/common/useIdWithFallback.ts b/src/common/useIdWithFallback.ts index 12828b2a7..f976ec6df 100644 --- a/src/common/useIdWithFallback.ts +++ b/src/common/useIdWithFallback.ts @@ -3,16 +3,16 @@ import * as React from "react" +const fallback = () => Math.random().toString(36).substring(2) + /** * A function to obtain a unique ID. If react is available, this * is just a wrapper for React.useId(), meaning the ID will be * consistent across SSR and CSR. Otherwise, it will be a random and * unique ID on every call. */ -export const useIdWithFallback = () => { - try { - return React.useId() - } catch (e) { - return Math.random().toString(36).substring(2) - } -} +export const useIdWithFallback = + // This weird import circumvents webpack's exportPresence check, + // since we're fine if the import doesn't exist, and we don't want + // it to cause a build error. + React["useId".toString() as "useId"] ?? fallback