Я также сталкиваюсь с этой проблемой, когда использую модули css, но когда я использую styled-jsx, он отлично работает.

Я заметил аналогичную проблему: глобальный css в _app.js, похоже, не загружается с отключенным javascript, пока он находится в режиме разработки. Это затрудняет тестирование SSR, поскольку могут отсутствовать стили.

@robgraeber У меня точно такая же проблема. CSS компилируется в _app.js вместо отдельного файла css.

Здесь та же проблема.
Я создал минимальный пример, воспроизводящий эту проблему: https://github.com/dnaranjo89/next-css-ssr

Также иногда я редактирую некоторые глобальные css в инспекторе, и любое изменение приводит к тому, что CSS всей страницы каким-то образом разрушается. Кто-нибудь испытал это?

@derskeal обходной путь - использовать этот плагин sass и импортировать таблицы стилей через sass в компонент Layout: https://github.com/giuseppeg/styled-jsx-plugin-sass

@Timer Я мог бы воспроизвести эту проблему в этом репо https://github.com/yanv1991/demo-react-dom , это не загрузка стилей с использованием встроенных модулей sass с динамически загружаемым компонентом для ssr в режиме prod

Этот проект нельзя запустить:

error - Error [FirebaseError]: projectId must be a string in FirebaseApp.options
    at new FirestoreError (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:1223:28)
    at Function.Firestore.databaseIdFromApp (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:21018:19)
    at new Firestore (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:20850:42)
    at /Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22871:66
    at Component.instanceFactory (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22410:16)
    at Provider.getOrInitializeService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:228:49)
    at FirebaseAppImpl.firebaseAppImpl.<computed> [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:440:39)
    at Object.serviceNamespace [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:420:45)
    at eval (webpack-internal:///./src/firebase/db.tsx:19:124)
    at Module../src/firebase/db.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:128:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31)
    at eval (webpack-internal:///./src/firebase/user.tsx:12:61)
    at Module../src/firebase/user.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:152:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31) {
  code: 'invalid-argument',
  toString: [Function]
}

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

Спасибо @Timer! 🎉 Я тестировал, и исправление у меня работает.

Я испытал это как в режиме разработки, так и в производственном режиме на настраиваемом сервере (постепенное преобразование страниц на корпоративном сайте). ^9.4.5-canary.15 исправил для меня!

Привет, ребята. Проверил проблему с канареечным выпуском, он устраняет проблему в режиме разработки, но в продакшене все еще остается. Есть ли у кого-нибудь такая же проблема?

В производственной сборке отсутствует <style data-next-hide-fouc="true">body{display:none}</style> .

Привет, ребята. Проверил проблему с канареечным выпуском, он устраняет проблему в режиме разработки, но в продакшене все еще остается. Есть ли у кого-нибудь такая же проблема?

В производственной сборке отсутствует <style data-next-hide-fouc="true">body{display:none}</style> .

То же самое здесь, это другая проблема, когда это происходит в продукте или связанном с ним, кто-нибудь знает?

То же самое здесь, это другая проблема, когда это происходит в продукте или связанном с ним, кто-нибудь знает?

Для меня эта проблема возникала только в режиме разработки, а не в производственном режиме. Учитывая это, я предполагаю, что проблема с продуктом может иметь другую причину.

Привет, ребята. Проверил проблему с канареечным выпуском, он устраняет проблему в режиме разработки, но в продакшене все еще остается. Есть ли у кого-нибудь такая же проблема?

В производственной сборке отсутствует <style data-next-hide-fouc="true">body{display:none}</style> .

Кто-нибудь смог исправить это в продакшене? В выпуске Canary исправлена ​​наша разработка, но производство все еще не работает.

Значит, канарейка будет последней версией следующей?

Да, @jimmynames ,

Это исправление входит в стабильную версию Next.js 9.5.0 и 9.5.1 или новее (применимо только к серверу разработки)!

А как насчет производства? Я все еще испытываю FOUC с пользовательским интерфейсом StyledComponents + Material

Кто-нибудь нашел решение для этого?