Next.js: estilos piscando no dev com módulos tailwind + css

Criado em 3 mai. 2020 · 13Comentários · Fonte: vercel/next.js

Relatório de erro

Descreva o bug

Estou usando o tailwindcss com módulos css e noto que na primeira vez que a página carrega, todos os meus estilos não são carregados. Tentando descobrir o que estava acontecendo, executei o exemplo tailwindcss e adicionei um estilo de um módulo css e isso acontece lá também, mesmo quando construído para prod.

Reproduzir

Execute o exemplo de https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

Adicione um arquivo index.module.css com algum estilo

adicione os estilos do módulo css na página index.js

Comportamento esperado

Sem o uso dos módulos css, todos os estilos são carregados corretamente na primeira vez, sem piscar. O mesmo comportamento é esperado usando módulos css

Capturas de tela

May-03-2020 14-06-19

Informação do sistema

OS: macOS
Navegador (se aplicável) [por exemplo, cromo, safari]
Versão do Next.js: v9.3.6
Versão do Node.js: v13.12.0
Versão do tailwindcss: v1.4.4

bug 2 next

Fonte

tafelito

👍9

Comentários muito úteis

Existe uma solução alternativa para resolver este problema
Crie um " _document.js " personalizado e adicione a classe " no-fouc " no componente Html
Crie um " _app.js " personalizado e adicione o seguinte código no campo " componentDidMount "

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

Adicione adicionar este estilos nos estilos globais:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

fadonascimento em 3 jun. 2020

👍6 😕1 👎1

Todos 13 comentários

Eu suspeito que isso pode ter algo a ver com a divisão automática de código de módulos css 🤔

Pytal em 7 mai. 2020

Provavelmente relacionado a https://github.com/zeit/next.js/issues/10268

mzygmunt em 8 mai. 2020

👍1

Eu usei módulos css simples para componentes e estilos aplicados após alguns ms

dani97 em 27 mai. 2020

Eu usei módulos css simples para componentes e estilos aplicados após alguns ms

De acordo com https://stackoverflow.com/a/42969608/943337, acabei de adicionar uma tag de script vazia e meu problema de uma barra lateral que estava aparecendo no primeiro carregamento, agora está resolvido.

https://github.com/vercel/next-plugins/issues/455#issuecomment -489452379

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Adrianjs42 em 27 mai. 2020

Eu usei módulos css simples para componentes e estilos aplicados após alguns ms
De acordo com https://stackoverflow.com/a/42969608/943337, acabei de adicionar uma tag de script vazia e meu problema de uma barra lateral que estava aparecendo no primeiro carregamento, agora está resolvido.
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Obrigado @ Adrianjs42 a barra lateral aparecendo parou no cromo.

dani97 em 28 mai. 2020

Também relacionado
https://github.com/vercel/next.js/issues/13058

webdeb em 31 mai. 2020

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

Adicione adicionar este estilos nos estilos globais:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

fadonascimento em 3 jun. 2020

👍6 😕1 👎1

Isso deve ser corrigido em next@^9.4.5-canary.15 ! Por favor, atualize e nos informe.

Timer em 22 jun. 2020

👍3 🎉2 👎1

@Timer , instalei next@^9.4.5-canary.18 . Agora a cintilação do CSS não aparece no modo de desenvolvimento , mas permanece a mesma na versão de produção . A versão de produção ainda tem o bug.

Observe que estou usando módulos material-ui + css

Aqui está uma versão do aplicativo em que estou trabalhando para enfrentar esse problema: https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 em 24 jun. 2020

👀1

@ Prottoy2938 O mesmo aqui. Fiz um comentário sobre esse problema https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle em 6 jul. 2020

@Timer , instalei next@^9.4.5-canary.18 . Agora a cintilação do CSS não aparece no modo de desenvolvimento , mas permanece a mesma na versão de produção . A versão de produção ainda tem o bug.
Observe que estou usando módulos material-ui + css
Aqui está uma versão do aplicativo em que estou trabalhando para enfrentar esse problema: cluster-11-lwj6nmcgy.vercel.app .

Parece que este seu caso não está relacionado a módulos css / tailwind e mais ainda relacionado a esquecer de implementar a pré-renderização de material-ui: https://github.com/vercel/next.js/issues/7322#issuecomment -653858948

timneutkens em 6 jul. 2020

@casperle , No meu caso, o problema era porque eu estava fazendo renderização do lado do servidor . Segui esta documentação do material-ui e resolvi o problema

Prottoy2938 em 6 jul. 2020

Com v9.4.5-canary.28 não piscando no desenvolvimento e piscando na produção.