Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Twenty is unusable on Firefox #10596

Closed
BOHEUS opened this issue Mar 1, 2025 · 4 comments · May be fixed by #10597
Closed

Twenty is unusable on Firefox #10596

BOHEUS opened this issue Mar 1, 2025 · 4 comments · May be fixed by #10597

Comments

@BOHEUS
Copy link
Contributor

BOHEUS commented Mar 1, 2025

Scenario:

  1. Open Twenty

Actual: It's impossible to log in, on login page there's white page instead of login popup, in devtools there are errors about released snapshot and failed DOM validation.

Image

Expected: Twenty must be usable on Firefox

Errors:

The pseudo class ":nth-last-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-last-of-type".

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.

Uncaught Error: Snapshot has already been released.
@mdrazak2001 mdrazak2001 mentioned this issue Mar 1, 2025
Open
@flywiththetide
Copy link

Potential Fixes for 'Twenty is Unusable on Firefox'

We've identified three possible causes for this issue, along with potential solutions:

1. CSS Pseudo-Class Warning (:nth-last-child)

  • Cause: This warning happens when certain CSS selectors (:nth-last-child) conflict with React’s Server-Side Rendering (SSR).
  • Solution: Modify :nth-last-child to :nth-last-of-type in the CSS. This should improve SSR compatibility.

2. React DOM Nesting Issue (<div> inside <tr>)

  • Cause: React enforces strict HTML structure. Placing a <div> inside a <tr> is invalid and causes errors.
  • Solution: Replace the <div> with a <td> or wrap the <div> inside a <td>, ensuring it follows valid HTML semantics.

3. Recoil State Error (Snapshot has already been released)

  • Cause: This usually occurs when Recoil state is accessed after being released, often due to asynchronous operations.
  • Solution: Ensure that state is accessed synchronously. Avoid asynchronous manipulations that could lead to reading a stale or released snapshot.

Recommendation

  • Review the components rendering the login page.
  • Ensure proper CSS selectors are used for SSR compatibility.
  • Validate that React elements follow correct HTML structure.
  • Debug how Recoil state is being accessed and updated.

These fixes should help resolve the Firefox rendering issues. Let us know if further debugging is needed!

@Bonapara
Copy link
Member

Bonapara commented Mar 3, 2025

Cannot reproduce

Image

@Bonapara Bonapara closed this as completed Mar 3, 2025
@BOHEUS
Copy link
Contributor Author

BOHEUS commented Mar 3, 2025

@Bonapara I don't reproduce it on the demo or prod but I reproduce it on my local testing instance 🤔

@Bonapara Bonapara reopened this Mar 4, 2025
@Bonapara Bonapara closed this as completed Mar 4, 2025
@Bonapara
Copy link
Member

Bonapara commented Mar 4, 2025 •
edited
Loading

Couldn't reproduce in local too 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
🎯 Roadmap & Sprints
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: handle recoil url sync initialization in Firefox mdrazak2001/twenty
3 participants
@Bonapara @BOHEUS @flywiththetide