In a fairly plex application, I made some changes related to refs and suddenly started seeing this warning.

Even though it's a warning, it's breaking my application.

I'm using React 16.3.0 with a next.js backend.

What is causing the "Unexpected Fiber popped" warning?

In a fairly plex application, I made some changes related to refs and suddenly started seeing this warning.

Even though it's a warning, it's breaking my application.

I'm using React 16.3.0 with a next.js backend.

What is causing the "Unexpected Fiber popped" warning?

• javascript
• reactjs
• warnings

6 Answers 6

This is a bug in React.

Please report it with a minimal example and we'll get it fixed.

Update to React >=16.3.1

This is a red herring warning which gets thrown when other errors occur.

In my particular case, it was caused by passing a prop to a DOM element which it didn't understand:

<div isModalOpen={true}>... Modal contents ...</div>

[email protected] fixes the red herring warning.

I had this error after upgrading React from 16.3.0 to 16.3.1 but forgot to upgrade React-Dom from 16.3.0 to match React. After upgrading both to 16.3.1 the issue was gone.

Happened to me when I didn't use Animated. prefix in my animated ponent. For Example If you are animating a <View> ponent, use,

<Animated.View>

not

<View>

I had this error too. it's so stressing me out but after a while i figured it out that i used an arrow asynchronous function instead of calling a single function as ponent in react <Suspense>. after i refactored it, it solved!

here's my code before:

import { must_login } from "./server-utils";

export default async function Dashboard() {

    return(
        <Suspense fallback={<p>Loading . .</p>}>
            {(async () => {
                await must_login();
                return <></>;
            })()}
        </Suspense>
    };
}

and here's after:

import MustLogin from "./must-login"

export default async function Dashboard() {

    return(
        <Suspense fallback={<p>Loading . .</p>}>
            <MustLogin />
        </Suspense>
    };
}

here's inside must-login.tsx:

import { must_login } from "./server-utils";

export async function MustLogin() {
    await must_login();
    return <></>;
}

I got this error in React Native. Turned out I had used div instead of View