From 97df6044a503b9c0436c2073c9f48e0c04fdce8a Mon Sep 17 00:00:00 2001 From: Niels Widger Date: Wed, 31 Jul 2024 16:13:32 -0400 Subject: [PATCH 1/2] Further obfuscate reference to React.useId Use technique from this comment: https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 to further obfuscate reference to `React.useId` which causes issue when using `react-resizable-panels` with React <18 and `esbuild` > 0.19.5. Fixes #381 --- packages/react-resizable-panels/src/vendor/react.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-resizable-panels/src/vendor/react.ts b/packages/react-resizable-panels/src/vendor/react.ts index dd68d9c7a..096b18e6f 100644 --- a/packages/react-resizable-panels/src/vendor/react.ts +++ b/packages/react-resizable-panels/src/vendor/react.ts @@ -36,8 +36,8 @@ const { useState, } = React; -// `toString()` prevents bundlers from trying to `import { useId } from 'react'` -const useId = (React as any)["useId".toString()] as () => string; +// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'` +const useId = (React as any)[`useId${Math.random()}`.slice(0, 5)] as () => string; const useLayoutEffect_do_not_use_directly = useLayoutEffect; From 9da8509883c1bfc8faf184f58bbdbf0e4d6e09ce Mon Sep 17 00:00:00 2001 From: Niels Widger Date: Fri, 2 Aug 2024 12:57:23 -0400 Subject: [PATCH 2/2] Fix formatting for vendor/react.ts Use formatting required by Prettier for this file. Co-authored-by: Brian Vaughn --- packages/react-resizable-panels/src/vendor/react.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-resizable-panels/src/vendor/react.ts b/packages/react-resizable-panels/src/vendor/react.ts index 096b18e6f..df7315d4c 100644 --- a/packages/react-resizable-panels/src/vendor/react.ts +++ b/packages/react-resizable-panels/src/vendor/react.ts @@ -37,7 +37,9 @@ const { } = React; // `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'` -const useId = (React as any)[`useId${Math.random()}`.slice(0, 5)] as () => string; +const useId = (React as any)[ + `useId${Math.random()}`.slice(0, 5) +] as () => string; const useLayoutEffect_do_not_use_directly = useLayoutEffect;