Next.js: स्टाइल-घटक हॉट रीलोड पर ओवरराइड किया गया

को निर्मित 28 मार्च 2018 · 27टिप्पणियाँ · स्रोत: vercel/next.js

[x] मैंने इस भंडार के मुद्दों की खोज की है और मुझे विश्वास है कि यह डुप्लिकेट नहीं है।

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

मेरे पृष्ठ में यह बहुत ही बुनियादी कोड है:

import React from 'react'
import styled from 'styled-components'

const Title = styled.h1`
  color: pink;
  font-size: 50px;
`

export default () => <Title>My page</Title>

जब मैं पृष्ठ को रीफ्रेश करता हूं, तो मुझे उम्मीद है कि शीर्षक गुलाबी रंग का होगा

वर्तमान व्यवहार

पहली बार जब पृष्ठ बनाया जाता है, तो शीर्षक गुलाबी दिखाई देता है। जब मैं पृष्ठ को रीफ्रेश करता हूं, तो गुलाबी रंग का सम्मान नहीं किया जाता है।
अगर मैं कोड में रंग को किसी और चीज़ में बदलता हूं, और फ़ाइल को सहेजता हूं, तो पेज अपडेट हो जाएगा। लेकिन फिर से, ताज़ा करने पर, परिवर्तन फिर से खो जाते हैं। मुझे नहीं पता कि इसका क्या कारण हो सकता है। किसी भी मदद की सराहना की जाती है।

आपका पर्यावरण

| टेक | संस्करण |
|-----------|------------|
| अगला | नवीनतम |
| नोड | |
| ओएस | आर्च |
| ब्राउज़र | विवाल्डी |

good first issue

स्रोत

ghost

👍7

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

साथ ही यह समस्या

संपादित करें (समाधान):

यह समस्या बैबल कॉन्‍फ़िगर सेटअप ठीक से न होने से संबंधित है। यदि आप स्टाइल-घटकों के साथ नेक्स्टजेएस के आधिकारिक उदाहरण को देखते हैं तो आप देखेंगे कि उनके पास .babelrc फ़ाइल है:

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

फिर आपको इस प्लगइन को अपनी package.json फ़ाइल में देव निर्भरता में जोड़ना होगा

"devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
},

फिर अपना इंस्टॉल कमांड चलाएं, yarn install या npm install और फिर आप जाने के लिए अच्छे होंगे!

पुनश्च: सुनिश्चित करें कि आपके स्थानीयहोस्ट देव कार्य के लिए केवल एक टैब खुला है!

MaxMcKinney 19 अप्रैल 2019

👍37 🎉20 ❤17 🚀10

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

मेरे पास एक ही बग है, एक अलग सेटअप के साथ। मेरे पास दो फ़ोल्डरों के साथ एक मोनोरेपो है:

app , मेरे next.js ऐप के साथ
ui , स्टाइल-घटकों का उपयोग करके मेरी 'ui लाइब्रेरी' के साथ

मेरे पास एक उदाहरण रेपो में है: https://github.com/lucleray/ssr-ui-library

जब मैं उदाहरण के लिए ui फ़ोल्डर में पृष्ठभूमि रंग अपडेट करता हूं, और फ़ाइल को सहेजता हूं, तो पृष्ठ अपडेट होता है।
लेकिन फिर, अगर मैं पृष्ठ को रीफ्रेश करता हूं, तो अपडेट खो जाते हैं।

lucleray 3 अप्रैल 2018

क्या यह <head> में स्टाइल शीट के इंजेक्शन ऑर्डर से कुछ लेना-देना है?

ianregister 8 अप्रैल 2018

@ianregister नहीं, <head> में इंजेक्शन का क्रम संबंधित नहीं है

समस्या यह है कि सर्वर और क्लाइंट स्टाइलशीट के लिए समान कोड प्रस्तुत नहीं करते हैं

lucleray 8 अप्रैल 2018

मेरे पास एक ही बग है और यह केवल शैलियों पर नहीं है। हॉट रीलोड परिवर्तनों को उठाएगा, लेकिन रीफ्रेशिंग ब्राउज़र नहीं करता है। नवीनतम अपडेट लेने के लिए मुझे फिर से सर्वर (नोड सर्वर.जेएस) चलाना होगा। मैं उपयोग कर रहा हूँ [email protected] , प्रतिक्रिया 16.3 और सर्वर के लिए व्यक्त करें।

sea129 17 अप्रैल 2018

👍1

@lucleray , इसे आजमाएं:

सुनिश्चित करें कि आपके पास एक निर्भरता के रूप में babel-plugin-styled-components और अपने package.json में बेबेल को बताएं कि आप सर्वर-साइड रेंडरिंग कर रहे हैं।

सोचें कि यह सिर्फ एक कॉन्फ़िगरेशन समस्या है जिसका आप सामना कर रहे हैं।

पैकेज.जेसन
`` `जेसन
"बेबेल": {
"एनवी": {
"विकास": {
"प्रीसेट": ["अगला/बेबेल"],
"प्लगइन्स": [
[
"स्टाइल-घटक",
{
"एसएसआर": सच है,
"डिस्प्लेनाम": सच
}
]
]
},
"उत्पादन": {
"प्रीसेट": ["अगला/बेबेल"],
"प्लगइन्स": [
[
"स्टाइल-घटक",
{
"एसएसआर": सच है,
"डिस्प्लेनाम": झूठा
}
]
]
}
}
}

tvthatsme 18 अप्रैल 2018

👍29 🎉16 🚀6 ❤3

@tvthatsme मैंने ui लाइब्रेरी और ऐप दोनों में ही babel-plugin-styled-components जोड़ा, लेकिन मेरे पास अभी भी वही समस्या है।

आप यहां जांच सकते हैं:
https://github.com/lucleray/ssr-ui-library/blob/master/app/.babelrc
https://github.com/lucleray/ssr-ui-library/blob/master/ui/.babelrc

मुझे यकीन नहीं है कि यह कॉन्फ़िगरेशन (वेबपैक कॉन्फ़िगरेशन), या कहीं बग है।

lucleray 18 अप्रैल 2018

समान समस्या होने पर जहां किसी घटक (गैर शैलियों से संबंधित) में कोई भी संपादन त्रुटि का कारण होगा "चेतावनी: प्रोप className मेल नहीं खाता। सर्वर:" बाद के हार्ड पेज पर ताज़ा। इसे दूर जाने के लिए सर्वर को पुनरारंभ करने की आवश्यकता है।

@sea129 क्या आप ठीक कर पाए?

valeeum 25 जुल॰ 2018

लॉल, यहाँ एक ही समस्या है। @valeeum क्या आप इसे हल करने में सक्षम थे?

chenshuiluke 11 अग॰ 2018

मैंने इस मुद्दे पर कुछ शोध किया है, और मुझे लगता है कि यह किसी प्रकार का "वेबपैक कैशिंग" लिंक हो सकता है।

मैं इस मुद्दे के उदाहरण के रूप में यहां कोड का उपयोग करता हूं: https://github.com/lucleray/ssr-ui-library

app Next.js का उपयोग कर रहा है और ui पर निर्भर है। मैं उन्हें जोड़ने के लिए यार्न के कार्यक्षेत्र का उपयोग कर रहा हूं, लेकिन यह अधिक सरल yarn link ।

सर्वर-साइड पर, बंडल में ui मॉड्यूल शामिल नहीं है और इसे external के रूप में मानता है (क्योंकि यह node_modules में है)।
क्लाइंट-साइड पर, बंडल में ui मॉड्यूल शामिल है।

यह .next/static (क्लाइंट-साइड) बंडलों में इस तरह दिखाई देता है:

/***/ "../ui/bundle.js":
/*!***********************!*\
  !*** ../ui/bundle.js ***!
  \***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = _interopDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js"));

const UiButton = styled.button`
  background: black;
`;

exports.UiButton = UiButton;


/***/ }),

दूसरी ओर, .next/server (सर्वर-साइड) बंडलों में, ऐसा प्रतीत होता है:

/***/ "@monorepo/ui":
/*!*******************************!*\
  !*** external "@monorepo/ui" ***!
  \*******************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = require("@monorepo/ui");

/***/ }),

अजीब बात यह है कि module.exports = require("@monorepo/ui") को ui पैकेज में हल करना चाहिए और बस ठीक काम करना चाहिए। लेकिन ऐसा लगता है कि यह कैश्ड है और वास्तविक ui पैकेज का समाधान नहीं करता है।

यदि मैं उदाहरण के लिए ui में बटन के पृष्ठभूमि रंग को नीले रंग में बदलता हूं। हॉट रीलोडर पेज को सही तरीके से अपडेट करता है। लेकिन अगर मैं रीफ्रेश करता हूं, तो पृष्ठ पुराने रंग (मेरे उदाहरण में हरा) के साथ सर्वर-साइड प्रस्तुत किया जाता है। यह ऐसा है जैसे सर्वर-साइड बंडल वास्तविक पैकेज पर जाने के लिए @monorepo/ui निर्भरता का समाधान नहीं कर रहा है, लेकिन इसके कैश्ड संस्करण का उपयोग कर रहा है।

इसने @monorepo/ui को बाहरी निर्भरता के रूप में नहीं मानने के लिए वेबपैक को कॉन्फ़िगर करके इसे हल किया और इसे सर्वर-साइड बंडलों में इस तरह बंडल किया: https://github.com/lucleray/ssr-ui-library/blob/ webpack-config/app/next.config.js

मैं अभी भी समझना चाहूंगा कि क्या हो रहा है

lucleray 19 अग॰ 2018

require में एक अंतर्निहित कैश है ( require.cache ) यह नोड_मॉड्यूल्स में निर्भरता के लिए अपेक्षित व्यवहार है, क्योंकि हम सर्वर पर नोड_मॉड्यूल्स के अंदर कुछ भी बंडल नहीं करेंगे (संकलन गति के लिए)।

timneutkens 19 अग॰ 2018

ठीक है, यह समझ में आता है।

तो मुद्दा यह है कि हॉट-रीलोडर बाहरी निर्भरताओं में कोड परिवर्तन को सर्वर-साइड पर पुनः लोड नहीं करता है, है ना?

मेरे द्वारा साझा किए गए उदाहरण में, मुझे उम्मीद है कि मेरे कोड परिवर्तन क्लाइंट (जो मामला है) और सर्वर (जो मामला नहीं है) दोनों तरफ विकास मोड में लोड किए जाएंगे।

lucleray 20 अग॰ 2018

तो मुद्दा यह है कि हॉट-रीलोडर बाहरी निर्भरताओं में कोड परिवर्तन को सर्वर-साइड पर पुनः लोड नहीं करता है, है ना?

बिल्कुल सही, हम केवल requ.cache से पूर्ण पथ हटाते हैं।

timneutkens 20 अग॰ 2018

आपको क्या लगता है कि मैं इस @timneutkens को कैसे हल कर सकता

क्या मुझे बाहरी निर्भरताओं से @monorepo/ui हटा देना चाहिए ताकि यह सर्वर-साइड बंडलों में बंडल हो जाए? यह काम करता है लेकिन चूंकि मैं इसे पहले से ही ट्रांसपिल कर रहा हूं, क्या इसे केवल इसकी आवश्यकता नहीं होगी?

lucleray 21 अग॰ 2018

मॉड्यूल संकलन को सक्षम करने के लिए https://github.com/martpie/next-plugin-transpile-modules का उपयोग करना उतना ही आसान हो सकता है।

timneutkens 8 नव॰ 2018

👎3

@timneutkens इसे क्यों बंद किया गया? यह समस्या अभी भी नवीनतम संस्करण पर मौजूद है

jeankvd 15 मार्च 2019

👍35

अभी भी यह समस्या हो रही है

oscargws 6 अप्रैल 2019

👍16

मुझे अभी भी यह समस्या हो रही है

asotoglez 8 अप्रैल 2019

यहाँ भी

Ruegen 14 अप्रैल 2019

साथ ही यह समस्या

संपादित करें (समाधान):

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

फिर आपको इस प्लगइन को अपनी package.json फ़ाइल में देव निर्भरता में जोड़ना होगा

"devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
},

MaxMcKinney 19 अप्रैल 2019

👍37 🎉20 ❤17 🚀10

ठीक लोग। यहाँ समाधान है। निर्देशिका के मूल में एक _document.js बनाएं और इसे जोड़ें।

import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class MyDocument extends Document {
  static getInitialProps ({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
    const styleTags = sheet.getStyleElement()
    return { ...page, styleTags }
  }

  render () {
    return (
      <html>
        <Head>
          <title>Your site title</title>
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

export default MyDocument

फिर npm install --save -D babel-plugin-styled-components

पेज निर्देशिका, _App.js में एक कस्टम ऐप भी बनाएं और जोड़ें:

import React from "react";
import App from "next/app";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default MyApp;

तुम सब सेट हो

ghost 4 सित॰ 2019

👍2

साथ ही यह समस्या
संपादित करें (समाधान):
यह समस्या बैबल कॉन्‍फ़िगर सेटअप ठीक से न होने से संबंधित है। यदि आप स्टाइल-घटकों के साथ नेक्स्टजेएस के आधिकारिक उदाहरण को देखते हैं तो आप देखेंगे कि उनके पास .babelrc फ़ाइल है:
{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}
फिर आपको इस प्लगइन को अपनी package.json फ़ाइल में देव निर्भरता में जोड़ना होगा
"devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
},
फिर अपना इंस्टॉल कमांड चलाएं, yarn install या npm install और फिर आप जाने के लिए अच्छे होंगे!
पुनश्च: सुनिश्चित करें कि आपके स्थानीयहोस्ट देव कार्य के लिए केवल एक टैब खुला है!

यह काम करता है, धन्यवाद

omendez85 5 सित॰ 2019

👍2

दुर्भाग्य से, यह अभी भी एक मुद्दा है।

हालांकि मैं कुछ अजीब देख रहा हूं:

यदि आपके पास है

styled.h1`
color: red;
`

प्रारंभिक लोड पर यह लाल होता है, जब आप इसे बदलते हैं

styled.h1`
color: purple;
`

इसे नजरअंदाज कर दिया जाता है, पाठ काला हो जाता है, कोई शैली नहीं।
जब आप पृष्ठ को पुनः लोड करते हैं तो यह अपेक्षा के अनुरूप बैंगनी हो जाता है।
लेकिन जब आप रंग बदलते हैं red , तो HMR ठीक से काम करता है और टेक्स्ट लाल हो जाता है।
आप इसे जितने चाहें उतने रंगों के साथ कर सकते हैं, जैसे कि किसी प्रकार की कैशिंग चल रही हो।

तो जब आप एचएमआर के माध्यम से एक नई शैली जोड़ते हैं तो इसे अनदेखा कर दिया जाता है, लेकिन प्रारंभिक रेंडर पर इसे कैश में रखा जाता है, और यदि आप बाद में एचएमआर के माध्यम से इस शैली का उपयोग करते हैं तो यह काम करेगा। तो यह HMR पर ब्राउज़र को ठीक से डिलीवर नहीं किया गया है?

मुझे SC और Next.js इंटर्नल के बारे में जानकारी नहीं है, इसलिए ये सिर्फ मेरे अनुमान हैं।

संपादित करें:
इसने स्टाइल-घटकों पर ठीक काम किया 5.0.0-rc.2

TheRusskiy 21 नव॰ 2019

सुनिश्चित नहीं है कि यह जानकारी कितनी प्रासंगिक होगी, लेकिन मैंने इसे अपने लिए कैसे तय किया है, क्या मैंने अगले रेपो से उदाहरण का पालन किया है और लापता बिट्स को एक टुकड़े में एकीकृत किया है
https://github.com/zeit/next.js/tree/canary/examples/with-typescript-styled-components

Igor2122 30 नव॰ 2019

मैं next.js का उपयोग कर रहा था और @MaxMcKinney समाधान ने मेरे लिए काम किया। बस सुनिश्चित करें कि आपने .babelrc वरीयताओं को सही ढंग से कॉन्फ़िगर किया है क्योंकि यह काफी भ्रमित करने वाला प्रारूप या सरणियों और वस्तुओं का पालन करने के लिए है।

उदाहरण के लिए यह मेरी .babelrc फ़ाइल थी:

{
    "presets": [
        [
            "next/babel",
            {
                "styled-jsx": {
                    "plugins": [
                        "styled-jsx-plugin-postcss"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        [
            "styled-components",
            {
                "ssr": true
            }
        ]
    ]
}

limitlessloop 30 मार्च 2020

👍1

यह समस्या तब होगी जब आप किसी ऐसे Next.js उदाहरणों का क्लोन बना रहे हैं और निर्माण कर रहे हैं जिनमें समान package.json निर्भरताएं और .babelrc सेटिंग नहीं हैं। MaxMckinney समाधान के अलावा, सुनिश्चित करें कि आपके पास package.json में सही निर्भरता है। मुझे "styled-components": "^5.0.0" बिल्कुल याद आ रहा था

CalvinKorver 8 मई 2020

मेरे मामले में, पेज फ़्लॉडर के तहत बस _app.js और _document.js फ़ाइल जोड़ें, यह ठीक काम करता है।

// _app.js
import App from 'next/app'
import { ThemeProvider } from 'styled-components'

const theme = {}

export default class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props
        return (
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        )
    }
}

// _document.js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

taiwanhua 23 जुल॰ 2020

👍1

// _app.js
import App from 'next/app'
import { ThemeProvider } from 'styled-components'

const theme = {}

export default class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props
        return (
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        )
    }
}

// _document.js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

मैं इसे सामग्री-यूआई में कैसे उपयोग करूं?

521707 24 अग॰ 2020

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

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