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.

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

[Bug] React-transition-group glitch bug #138

Open
DonghyukJacobJang opened this issue Sep 15, 2021 · 2 comments
Open

[Bug] React-transition-group glitch bug #138

DonghyukJacobJang opened this issue Sep 15, 2021 · 2 comments
Assignees
Labels
bug Something isn't working low low priority

Comments

@DonghyukJacobJang
Copy link
Collaborator

DonghyukJacobJang commented Sep 15, 2021

ISSUE
vercel/next.js#17464

SOLUTION
https://github.com/Jam3/prj-2140-sonos-june-frontend/blob/develop/src/utils/hooks/use-transition-fix.js

@DonghyukJacobJang DonghyukJacobJang added the bug Something isn't working label Sep 15, 2021
@DonghyukJacobJang DonghyukJacobJang added the low low priority label Sep 16, 2021
@edgardz
Copy link
Collaborator

edgardz commented Feb 24, 2022

Added this on the project initialization in order to fix this issue:

      // Fix https://github.com/vercel/next.js/issues/17464
      document
        .querySelectorAll('head > link[rel="stylesheet"][data-n-p]')
        .forEach((node) => node.removeAttribute('data-n-p'));
      new MutationObserver((mutations) => {
        mutations.forEach(({ target }) => {
          const t = target as Element;
          if (t.nodeName === 'STYLE' && t.getAttribute('media') === 'x') t.removeAttribute('media');
        });
      }).observe(document.head, { subtree: true, attributeFilter: ['media'] });

@jmckinnell
Copy link
Member

Let's add this to a list of gotchas. Should not be a part of the Boilerplate.

@jmckinnell jmckinnell self-assigned this Feb 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working low low priority
Projects
None yet
Development

No branches or pull requests

4 participants