Next.js: टेलविंड + सीएसएस मॉड्यूल के साथ देव में टिमटिमाती हुई शैलियाँ

को निर्मित 3 मई 2020 · 13टिप्पणियाँ · स्रोत: vercel/next.js

बग रिपोर्ट

बग का वर्णन करें

मैं सीएसएस मॉड्यूल के साथ टेलविंडस्कॉल्स का उपयोग कर रहा हूं और मैं नोटिस करता हूं कि पहली बार पेज लोड होने पर, मेरी सभी शैलियों को लोड नहीं किया गया है। यह पता लगाने की कोशिश कर रहा है कि क्या हो रहा था, मैंने टेलविंडस्केक्स उदाहरण को चलाया और एक सीएसएस मॉड्यूल से एक शैली को जोड़ा और यह तब भी होता है, जब उत्पादों के लिए भी बनाया जाता है।

प्रजनन करना

उदाहरण को https://github.com/zeit/next.js/tree/canary/examples/with-atelwindcss से चलाएँ

किसी शैली के साथ index.module.css फ़ाइल जोड़ें

शैलियों को index.js पृष्ठ में css मॉड्यूल बनाते हैं

अपेक्षित् व्यवहार

सीएसएस मॉड्यूल के उपयोग के बिना, सभी शैलियों को पहली बार ठीक से लोड किया जाता है, बिना झिलमिलाहट के। सीएसएस मॉड्यूल का उपयोग करके समान व्यवहार की उम्मीद की जाती है

स्क्रीनशॉट

May-03-2020 14-06-19

प्रणाली की जानकारी

OS: macOS
ब्राउज़र (यदि लागू होता है) [जैसे क्रोम, सफारी]
Next.js का संस्करण: v9.3.6
Node.js का संस्करण: v13.12.0
Tailwindcss का संस्करण: v1.4.4

bug 2 next

स्रोत

tafelito

👍9

सबसे उपयोगी टिप्पणी

इस समस्या को हल करने के लिए एक समाधान है
एक कस्टम " _document.js " बनाएं और Html घटक में " no-fouc " वर्ग जोड़ें
एक कस्टम बनाएँ " _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 टिप्पणियाँ

मुझे संदेह है कि सीएसएस मॉड्यूल के स्वचालित कोड विभाजन के साथ ऐसा करने के लिए कुछ हो सकता है something

Pytal 7 मई 2020

संभवतः https://github.com/zeit/next.js/issues/10268 से संबंधित है

mzygmunt 8 मई 2020

👍1

मैंने कुछ एमएस के बाद घटकों और शैलियों के लिए सादे सीएसएस मॉड्यूल का उपयोग किया है।

dani97 27 मई 2020

मैंने कुछ एमएस के बाद घटकों और शैलियों के लिए सादे सीएसएस मॉड्यूल का उपयोग किया है।

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

मैंने कुछ एमएस के बाद घटकों और शैलियों के लिए सादे सीएसएस मॉड्यूल का उपयोग किया है।
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

@ टिमर , मैंने next@^9.4.5-canary.18 स्थापित किए हैं। अब सीएसएस फ़्लिकरिंग विकास मोड में दिखाई नहीं देता है, लेकिन यह उत्पादन संस्करण पर समान रहता है। उत्पादन संस्करण में अभी भी बग है।

ध्यान दें कि मैं सामग्री-यूआई + सीएसएस मॉड्यूल का उपयोग कर रहा हूं

मैं इस मुद्दे का सामना करने पर काम कर रहा है कि एप्लिकेशन का एक संस्करण Heres: https://cluster-11-lwj6nmcgy.vercel.app/ ।

Prottoy2938 24 जून 2020

👀1

@ Prottoy2938 यहां भी। मैंने इस मुद्दे पर एक टिप्पणी की https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle 6 जुल॰ 2020

@ टिमर , मैंने next@^9.4.5-canary.18 स्थापित किए हैं। अब सीएसएस फ़्लिकरिंग विकास मोड में दिखाई नहीं देता है, लेकिन यह उत्पादन संस्करण पर समान रहता है। उत्पादन संस्करण में अभी भी बग है।
ध्यान दें कि मैं सामग्री-यूआई + सीएसएस मॉड्यूल का उपयोग कर रहा हूं
मैं इस मुद्दे का सामना करने पर काम कर रहा है कि एप्लिकेशन का एक संस्करण Heres: क्लस्टर-11-lwj6nmcgy.vercel.app ।

ऐसा लगता है कि आपका मामला css मॉड्यूल / टेलविंड से असंबंधित है और सामग्री-यूआई के पूर्व-प्रतिपादन को लागू करने के लिए भूलने से संबंधित है: https://github.com/vercel/next.js/issues/7322#issuitomment -653858948

timneutkens 6 जुल॰ 2020

@ कैस्परल , मेरे मामले में समस्या यह थी कि मैं सर्वर साइड रेंडरिंग कर रहा था। मैंने सामग्री-यूआई से इस

Prottoy2938 6 जुल॰ 2020

V9.4.5-canary.28 के साथ देव में चंचलता और उत्पादन में चंचलता नहीं।

talaikis 6 जुल॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स