Ich bin auch mit diesem Problem konfrontiert, wenn ich CSS-Module verwende, aber wenn ich styled-jsx verwende, funktioniert es einwandfrei.

Ich stelle ein ähnliches Problem fest, dass das globale CSS in _app.js im Entwicklungsmodus nicht mit ausgeschaltetem Javascript geladen zu sein scheint. Dies macht das Testen von SSR schwieriger, da möglicherweise Stile fehlen.

@robgraeber Ich habe genau das Problem, das Sie tun. Das CSS wird anstelle einer separaten CSS-Datei in _app.js kompiliert.

Gleiches Problem hier.
Ich habe ein Mindestbeispiel für die Reproduktion dieses Problems erstellt: https://github.com/dnaranjo89/next-css-ssr

Außerdem bearbeite ich manchmal ein globales CSS im Inspektor und jede Änderung führt dazu, dass das CSS der gesamten Seite irgendwie zerstört wird. Hat das jemand erlebt?

@derskeal Eine https://github.com/giuseppeg/styled-jsx-plugin-sass

@Timer Ich konnte dieses Problem in diesem Repo https://github.com/yanv1991/demo-react-dom reproduzieren. Dies lädt die Stile nicht mit eingebauten Sass-Modulen mit einer dynamisch geladenen Komponente für SSR im Prod-Modus

Dieses Projekt kann nicht ausgeführt werden:

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]
}

Dies sollte in next@^9.4.5-canary.15 behoben werden! Bitte aktualisieren Sie und lassen Sie es uns wissen.

Danke @Timer! 🎉 Ich habe getestet und das Update funktioniert für mich.

Ich habe dies sowohl im Entwicklungsmodus als auch im Produktionsmodus auf einem benutzerdefinierten Server festgestellt (schrittweise Konvertierung von Seiten auf Unternehmensseiten). ^9.4.5-canary.15 es für mich behoben!

Hallo Leute. Das Problem mit der kanarischen Version wurde überprüft. Es behebt das Problem im Entwicklungsmodus, bleibt jedoch in der Produktion bestehen. Hat jemand das gleiche Problem?

Im Produktions-Build fehlt das <style data-next-hide-fouc="true">body{display:none}</style> .

Hallo Leute. Das Problem mit der kanarischen Version wurde überprüft. Es behebt das Problem im Entwicklungsmodus, bleibt jedoch in der Produktion bestehen. Hat jemand das gleiche Problem?

Im Produktions-Build fehlt das <style data-next-hide-fouc="true">body{display:none}</style> .

Ist das hier ein anderes Problem, wenn es in Prod oder verwandten Fällen auftritt, weiß jemand Bescheid?

Ist das hier ein anderes Problem, wenn es in Prod oder verwandten Fällen auftritt, weiß jemand Bescheid?

Für mich trat dieses Problem nur im Entwicklungsmodus auf, nicht im Produktionsmodus. Angesichts dessen würde ich annehmen, dass das Produktproblem eine andere Ursache haben könnte.

Hallo Leute. Das Problem mit der kanarischen Version wurde überprüft. Es behebt das Problem im Entwicklungsmodus, bleibt jedoch in der Produktion bestehen. Hat jemand das gleiche Problem?

Im Produktions-Build fehlt das <style data-next-hide-fouc="true">body{display:none}</style> .

Konnte jemand dies in der Produktion beheben? Canary Release hat unseren Entwickler-Build repariert, aber die Produktion ist immer noch unterbrochen.

Also ist Canary die neueste Version von Next?

Ja @jimmynames ,

Dieser Fix befindet sich in der stabilen Version von Next.js 9.5.0 und 9.5.1 oder höher (gilt nur für Entwicklungsserver)!

Was ist mit der Produktion? Ich habe immer noch Erfahrung mit der FOUC mit StyledComponents + Material UI

Hat jemand eine Lösung dafür gefunden?