Bug: Internal React error: Expected static flag was missing.

[Fun117]

This error arose while implementing a feature to collapse reply comments in the comment section of a website. You can find the potentially problematic code here.

Versions:

• Next.js: 14.1.3
• React: 18

Steps To Reproduce

1. Go to this code sandbox.
2. Open the page.
3. Check the console for the error message.

Additional Repositories

• Repository with the potentially problematic code: Fun117/my-react-issues
• Repository where the feature (reply comment collapsing) is planned to be added: selcold/scratch-building

The current behavior

An error occurs due to the malfunctioning show/hide comments feature, particularly an unexpected internal React error.
Error-causing file

The expected behavior

The show/hide comments feature should function correctly without any errors.

[SolomonGrundy-97]

Definitely

[pwbriggs]

Hey there @Fun117 👋

Thanks for opening this issue! To help us fix the problem you're experiencing, could you please do two things for me:

1. Create a minimal, reproducible example demonstrating this bug. I'd start by removing irrelevant parts of the app one at a time, checking that the error still exists. Read the article I just linked to for more information.
2. Send a link to a new sandbox with this minimal, reproducible example.

Thanks! ❤️

[Fun117]

Hi @pwbriggs 👋

Thank you for your prompt response!

I've managed to resolve the error by making some changes to the code as suggested. Here's what I did:

Code Changes:

CommentsHTML Function Parameters: Changed the parameters of the CommentsHTML function to accept an object instead of individual arguments. This enhances readability and maintainability.

Old Code:

export function CommentsHTML(CommentsData: Comments[], username: string, userId: string, userImage: string): JSX.Element[] {

New Code:

export function CommentsHTML({ CommentsData, username, userId, userImage }: { CommentsData: Comments[], username: string, userId: string, userImage: string }): JSX.Element[] {

Refactored CommentsHtmlContents Function: Simplified the CommentsHtmlContents function by extracting the rendering logic into a nested Group component. This improves code readability and organization.

Old Code:

export function CommentsHtmlContents({ commentsRes, comments, userData }: { commentsRes: boolean, comments: any, userData: any }) {

    // Omitted

    // CommentsHTML を一時的に保存
    let commentsContent = null;
    if (commentsRes) {
        if (comments.length > 0) {
            commentsContent = CommentsHTML(comments, username, userId, userImage);
        } else {
            commentsContent = (
                <li className='animated-slideIn-up p-2 animate-fade-up animate-once animate-duration-500 animate-delay-0 animate-ease-in-out animate-normal animate-fill-forwards'>
                    // Omitted
                </li>
            );
        }
    } else {
        commentsContent = (
            <li className="relative flex flex-col md:flex-row flex-wrap items-center justify-end w-full">
                // Omitted
            </li>
        );
    }

    return (
        <>
            <section className="md:p-6 pt-0">
                // Omitted
            </section>
        </>
    )
}

New Code:

export function CommentsHtmlContents({ commentsRes, comments, userData }: { commentsRes: boolean, comments: any, userData: any }) {

   // Omitted

    function Group({ children }: { children: React.ReactNode }) {
        return (
            <section className="md:p-6 pt-0">
                <ul className="flex flex-col justify-center items-center gap-1 w-full mt-10 *:flex *:flex-row *:flex-wrap *:justify-end *:items-center *:w-full *:p-1">
                    {children}
                </ul>
            </section>
        )
    }

    // CommentsHTML を一時的に保存
    let commentsContent = null;
    if (commentsRes) {
        if (comments.length > 0) {
            return (
                <Group>
                    <CommentsHTML CommentsData={comments} username={username} userId={userId} userImage={userImage}/>
                </Group>
            )
        } else {
            <Group>
                // Omitted
            </Group>
        }
    } else {
        <Group>
            // Omitted
        </Group>
    }
}

Updated Code Sandbox:

I've updated the code in the provided CodeSandbox to reflect these changes. You can view the updated code here.

Note

While I was able to resolve the issue when reducing the code to a minimal reproduction, the specific reason for the error remains unclear.

Thank you for your assistance! ❤️