fix: silently fallback on multiple react versions

pmndrs · Mar 5, 2023 · 7c3c345 · 7c3c345
1 parent 773c1ae
commit 7c3c345
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -81,22 +81,21 @@ interface ReactInternal {
   }
 }
 
-const { ReactCurrentOwner, ReactCurrentDispatcher } = (React as unknown as ReactInternal)
-  .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+const { ReactCurrentOwner, ReactCurrentDispatcher } =
+  (React as unknown as ReactInternal).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ?? {}
 
 /**
  * Returns the current react-internal {@link Fiber}. This is an implementation detail of [react-reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler).
  */
 export function useFiber(): Fiber<null> | undefined {
   const root = React.useContext(FiberContext)
-  if (!root) throw new Error('its-fine: useFiber must be called within a <FiberProvider />!')
 
   // In development mode, React will expose the current component's Fiber as ReactCurrentOwner.
   // In production, we don't have this luxury and must traverse from FiberProvider via useId
   const id = React.useId()
   const fiber = React.useMemo(
     () =>
-      ReactCurrentOwner.current ??
+      ReactCurrentOwner?.current ??
       traverseFiber<null>(root, false, (node) => {
         let state = node.memoizedState
         while (state) {
@@ -198,7 +197,7 @@ export function useContextBridge(): ContextBridge {
   while (node) {
     const context = node.type?._context
     if (context && context !== FiberContext && !contexts.has(context)) {
-      contexts.set(context, ReactCurrentDispatcher.current?.readContext(wrapContext(context)))
+      contexts.set(context, ReactCurrentDispatcher?.current?.readContext(wrapContext(context)))
     }
     node = node.return!
   }

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -42,7 +42,7 @@ class ClassComponent extends React.Component<{ children?: React.ReactNode }> {
 }
 
 describe('useFiber', () => {
-  it('throws when used outside of a FiberProvider', async () => {
+  it('silently fails when used outside of a FiberProvider', async () => {
     let threw = false
 
     function Test() {
@@ -55,7 +55,7 @@ describe('useFiber', () => {
     }
     await act(async () => render(<Test />))
 
-    expect(threw).toBe(true)
+    expect(threw).toBe(false)
   })
 
   it('gets the current react-internal Fiber', async () => {
@@ -158,13 +158,13 @@ describe('traverseFiber', () => {
       ),
     )
 
-    const traversed: Fiber<any>[] = [];
+    const traversed: Fiber<any>[] = []
     traverseFiber(fiber, true, (node) => void traversed.push(node))
 
-    expect(traversed.filter(o => o.stateNode?.props?.name === "other").length).toBe(0)
-    expect(traversed.filter(o => o.stateNode?.props?.name === "ancestor").length).toBe(1)
-    expect(traversed.filter(o => o.stateNode?.props?.name === "parent").length).toBe(1)
-    
+    expect(traversed.filter((o) => o.stateNode?.props?.name === 'other').length).toBe(0)
+    expect(traversed.filter((o) => o.stateNode?.props?.name === 'ancestor').length).toBe(1)
+    expect(traversed.filter((o) => o.stateNode?.props?.name === 'parent').length).toBe(1)
+
     const [self, parent, ancestor] = traversed
     expect(self.type).toBe(Test)
     expect(parent.stateNode?.props?.name).toBe('parent')