Razzle: शैलियों का हाइड्रेशन ठीक से प्रस्तुत नहीं करना

को निर्मित 3 अक्तू॰ 2018 · 5टिप्पणियाँ · स्रोत: jaredpalmer/razzle

लविंग रैज़ल, इतना बढ़िया टूल।

मुझे एक समस्या हो रही है जहां मैं सामग्री यूआई सेटअप करता हूं और सब कुछ काम कर रहा है _fantastically_ एक चीज को छोड़कर: एक उप पृष्ठ पर जाने और पृष्ठ को रीफ्रेश करने पर मुझे केवल न्यूनतम शैलियों वाला एक पृष्ठ मिलता है। यह वास्तव में एक आकर्षक बग है क्योंकि पिछले yarn start से कौन सा पृष्ठ खुला था, इस पर निर्भर करता है कि रीफ्रेश होने पर यह केवल उस पृष्ठ को ठीक से प्रस्तुत करेगा, लेकिन यदि मैं नेविगेट करता हूं और रीफ्रेश करता हूं तो यह काम नहीं करेगा (रूट पथ पर भी)।

सर्वर को yarn start प्रारंभ करें
उदाहरण के लिए http://localhost:3000/blog-posts
पृष्ठ को ताज़ा करें (सब कुछ बकवास जैसा दिखता है)
सर्वर को मारें (ब्राउज़र विंडो को खुला रखें)
सर्वर को yarn start प्रारंभ करें
पृष्ठ को ताज़ा करें और यह सुंदर दिखता है (सब कुछ ठीक से प्रस्तुत करना)
_any_ दूसरे पेज पर नेविगेट करें
ताज़ा करें, बकवास लग रहा है... और दोहराएं।

मैंने yarn build && yarn start:prod की कोशिश की और सिस्टम चलता है, लेकिन केवल न्यूनतम शैलियों के साथ। हालांकि, अगर मैं एक लिंक ढूंढता हूं और उस पर क्लिक करता हूं तो पूरा एप्लिकेशन फिर से सुंदर दिखता है।

मुझे लगता है कि यह हाइड्रेट या शायद इसके कुछ संयोजन और @material-ui/core/styles/withStyles साथ एक मुद्दा है। क्या आप में से कोई इस समस्या का सामना कर रहा है?

बाद के पेज लोड पर कक्षाएं अलग-अलग हैं ( एचटीएमएल प्रदान की गई ) जिसका अर्थ है कि यह संभवतः आइसोमोर्फिक शैलियों/वर्गों के प्रारंभिक लोडिंग से संबंधित है जो मुझे पता है कि निम्नलिखित चर्चाओं से संबंधित है:

डेमो सीएसएस मॉड्यूल https://github.com/stereobooster/razzle-cssmodules
https://github.com/jaredpalmer/razzle/issues/428
https://github.com/jaredpalmer/razzle/issues/705

हालांकि, जैसा कि मेरी स्थिति ऊपर दिखाती है, ऐसा लगता है कि यह कुछ समय काम कर रहा है जो मुझे लगता है कि यह उन चर्चाओं की तुलना में करीब है जो इसे प्रकट कर रहे हैं। विचार?

स्रोत

panbanda

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

आपको लगता है कि शोध और डिबगिंग के लंबे थकाऊ घंटों के बाद यह थोड़ा अधिक संतुष्टिदायक होगा, लेकिन फिक्स मूल रूप से after.js, प्रतिक्रिया-जेएसएस का उपयोग कर रहा है, अपना खुद का Document उत्पन्न कर रहा है और फिर नीचे की रेखा इस धागे के बारे में (मुईथीमप्रोवाइडर के बारे में जो केवल एमयूआई से संबंधित है):

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

आप सभी इस दर्द से बचें। :पी

panbanda 8 अक्तू॰ 2018

🎉4

सभी 5 टिप्पणियाँ

हाहाहा मुझे रैज़ल में सामग्री UI के साथ भी यही समस्या थी

CharlyJazz 3 अक्तू॰ 2018

❤4

@CharlyJazz यह बहुत (एन | डीआईएस) साहसी है। हाहा क्या आपने उनके withStyles कार्यान्वयन से और आइसोमोर्फिक कक्षाओं में जाने की कोशिश की?

panbanda 6 अक्तू॰ 2018

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

आप सभी इस दर्द से बचें। :पी

panbanda 8 अक्तू॰ 2018

🎉4

@jaredpalmer @jylinman क्या रैज़ल दस्तावेज़ीकरण के लिए इसका उदाहरण बनाना संभव नहीं है?

CharlyJazz 8 अक्तू॰ 2018

इस समस्या का सामना करने वाले किसी और को मैं आधिकारिक सामग्री-यूआई एसएसआर दस्तावेज़ों का पालन करने की अत्यधिक अनुशंसा कर सकता हूं: https://material-ui.com/guides/server-rendering/

jacobfunch 8 जन॰ 2019

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

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

Razzle: शैलियों का हाइड्रेशन ठीक से प्रस्तुत नहीं करना

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

सभी 5 टिप्पणियाँ

संबंधित मुद्दों