Next.js: мерцающие стили в dev с модулями tailwind + css

Созданный на 3 мая 2020 · 13Комментарии · Источник: vercel/next.js

Сообщение об ошибке

Опишите ошибку

Я использую tailwindcss с модулями css и замечаю, что при первой загрузке страницы все мои стили не загружаются. Пытаясь понять, что происходит, я запустил пример tailwindcss и добавил стиль из модуля css, и это тоже происходит там, даже когда он построен для prod.

Воспроизводить

Запустите пример с https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

Добавьте файл index.module.css с некоторым стилем

добавить стили из модуля css на страницу index.js

Ожидаемое поведение

Без использования модулей css все стили загружаются с первого раза нормально, без мерцания. Такое же поведение ожидается при использовании модулей css

Скриншоты

May-03-2020 14-06-19

Системная информация

ОС: macOS
Браузер (если есть) [например, хром, сафари]
Версия Next.js: v9.3.6
Версия Node.js: v13.12.0
Версия tailwindcss: v1.4.4

bug 2 next

Источник

tafelito

👍9

Самый полезный комментарий

Есть обходной путь для решения этой проблемы
Создайте собственный " _document.js " и добавьте класс " no-fouc " в компонент Html.
Создайте собственный " _app.js " и добавьте следующий код в " componentDidMount "

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

Добавить добавить эти стили в глобальные стили:

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

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

fadonascimento 3 июн. 2020

👍6 😕1 👎1

Все 13 Комментарий

Я подозреваю, что это может иметь какое-то отношение к автоматическому разделению кода модулей css 🤔

Pytal 7 мая 2020

Вероятно, связано с https://github.com/zeit/next.js/issues/10268

mzygmunt 8 мая 2020

👍1

Я использовал простые модули css для компонентов и стилей, применяемых через некоторое время.

dani97 27 мая 2020

Я использовал простые модули css для компонентов и стилей, применяемых через некоторое время.

Согласно https://stackoverflow.com/a/42969608/943337, я просто добавил пустой тег скрипта, и моя проблема с боковой панелью, которая появлялась при первой загрузке, теперь решена.

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 27 мая 2020

Я использовал простые модули css для компонентов и стилей, применяемых через некоторое время.
Согласно https://stackoverflow.com/a/42969608/943337, я просто добавил пустой тег скрипта, и моя проблема с боковой панелью, которая появлялась при первой загрузке, теперь решена.
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, боковая панель перестала появляться в хроме.

dani97 28 мая 2020

Также связанные
https://github.com/vercel/next.js/issues/13058

webdeb 31 мая 2020

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

Добавить добавить эти стили в глобальные стили:

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

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

fadonascimento 3 июн. 2020

👍6 😕1 👎1

Это должно быть исправлено в next@^9.4.5-canary.15 ! Пожалуйста, обновите и дайте нам знать.

Timer 22 июн. 2020

👍3 🎉2 👎1

@Timer , я установил next@^9.4.5-canary.18 . Теперь мерцание CSS не отображается в режиме разработки , но остается неизменным в производственной версии. В производственной версии все еще есть ошибка.

Обратите внимание, что я использую модули material-ui + css

Вот версия приложения, над которым я работал, столкнувшись с этой проблемой: https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 24 июн. 2020

👀1

@ Prottoy2938 Здесь то же самое. Я оставил комментарий к этой проблеме https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle 6 июл. 2020

@Timer , я установил next@^9.4.5-canary.18 . Теперь мерцание CSS не отображается в режиме разработки , но остается неизменным в производственной версии. В производственной версии все еще есть ошибка.
Обратите внимание, что я использую модули material-ui + css
Вот версия приложения, над которым я работал, столкнувшись с этой проблемой: cluster-11-lwj6nmcgy.vercel.app .

Кажется, этот ваш случай не связан с модулями css / попутным ветром и, более того, связан с тем, что вы забыли реализовать предварительный рендеринг material-ui: https://github.com/vercel/next.js/issues/7322#issuecomment -653858948

timneutkens 6 июл. 2020

@casperle , В моем случае проблема была в том, что я делал рендеринг на стороне сервера . Я следил за этой документацией из material-ui и исправил проблему

Prottoy2938 6 июл. 2020

С v9.4.5-canary.28 не мерцает в dev и не мерцает в production.