Next.js: estilos parpadeando en dev con módulos tailwind + css

Creado en 3 may. 2020 · 13Comentarios · Fuente: vercel/next.js

Informe de error

Describe el error

Estoy usando tailwindcss con módulos css y me doy cuenta de que la primera vez que se carga la página, no se cargan todos mis estilos. Tratando de imaginar que ponía lo que estaba sucediendo, ejecuté el ejemplo tailwindcss y agregué un estilo de un módulo css y también sucede allí, incluso cuando se construyó para prod.

Reproducir

Ejecute el ejemplo de https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

Agregue un archivo index.module.css con algo de estilo

agregue los estilos del módulo css en la página index.js

Comportamiento esperado

Sin el uso de los módulos CSS, todos los estilos se cargan bien la primera vez, sin parpadear. Se espera el mismo comportamiento usando módulos css

Capturas de pantalla

May-03-2020 14-06-19

Información del sistema

SO: macOS
Navegador (si corresponde) [p. Ej., Chrome, Safari]
Versión de Next.js: v9.3.6
Versión de Node.js: v13.12.0
Versión de tailwindcss: v1.4.4

bug 2 next

Fuente

tafelito

👍9

Comentario más útil

Hay una solución para resolver este problema.
Cree un " _document.js " personalizado y agregue la clase " no-fouc " en el componente Html
Cree un " _app.js " personalizado y agregue el siguiente código en el " componentDidMount "

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

Agregue agregue estos estilos en los estilos globales:

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

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

fadonascimento en 3 jun. 2020

👍6 😕1 👎1

Todos 13 comentarios

Sospecho que esto puede tener algo que ver con la división automática del código de los módulos css 🤔

Pytal en 7 may. 2020

Probablemente relacionado con https://github.com/zeit/next.js/issues/10268

mzygmunt en 8 may. 2020

👍1

He usado módulos CSS simples para componentes y estilos que se aplican después de algunos ms.

dani97 en 27 may. 2020

He usado módulos CSS simples para componentes y estilos que se aplican después de algunos ms.

De acuerdo con https://stackoverflow.com/a/42969608/943337, acabo de agregar una etiqueta de script vacía y mi problema de una barra lateral que aparecía en la primera carga, ahora está resuelto.

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 en 27 may. 2020

He usado módulos CSS simples para componentes y estilos que se aplican después de algunos ms.
De acuerdo con https://stackoverflow.com/a/42969608/943337, acabo de agregar una etiqueta de script vacía y mi problema de una barra lateral que aparecía en la primera carga, ahora está resuelto.
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;

Gracias @ Adrianjs42, la barra lateral apareciendo se detuvo en cromo.

dani97 en 28 may. 2020

También relacionado
https://github.com/vercel/next.js/issues/13058

webdeb en 31 may. 2020

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

Agregue agregue estos estilos en los estilos globales:

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

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

fadonascimento en 3 jun. 2020

👍6 😕1 👎1

¡Esto debería arreglarse en next@^9.4.5-canary.15 ! Actualice y avísenos.

Timer en 22 jun. 2020

👍3 🎉2 👎1

@Timer , he instalado next@^9.4.5-canary.18 . Ahora, el parpadeo de CSS no aparece en el modo de desarrollo , pero permanece igual en la versión de producción . La versión de producción todavía tiene el error.

Tenga en cuenta que estoy usando módulos material-ui + css

Aquí hay una versión de la aplicación en la que he estado trabajando para enfrentar este problema: https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 en 24 jun. 2020

👀1

@ Prottoy2938 Lo mismo aquí. Hice un comentario sobre este problema https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle en 6 jul. 2020

@Timer , he instalado next@^9.4.5-canary.18 . Ahora, el parpadeo de CSS no aparece en el modo de desarrollo , pero permanece igual en la versión de producción . La versión de producción todavía tiene el error.
Tenga en cuenta que estoy usando módulos material-ui + css
Aquí hay una versión de la aplicación en la que he estado trabajando para enfrentar este problema: cluster-11-lwj6nmcgy.vercel.app .

Parece que su caso no está relacionado con los módulos css / tailwind y más relacionado con el olvido de implementar la representación previa de material-ui: https://github.com/vercel/next.js/issues/7322#issuecomment -653858948

timneutkens en 6 jul. 2020

@casperle , en mi caso el problema fue porque estaba haciendo renderización del lado del servidor . Seguí esta documentación de material-ui y solucioné el problema

Prottoy2938 en 6 jul. 2020

Con v9.4.5-canary.28 no parpadea en desarrollo y parpadea en producción.