Next.js: تم تجاوز المكون المصمم عند إعادة التحميل السريع

تم إنشاؤها على ٢٨ مارس ٢٠١٨ · 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

التعليق الأكثر فائدة

أيضا وجود هذه المشكلة

تحرير (حل):

تتعلق هذه المشكلة بعدم وجود إعداد تكوين babel بشكل صحيح. إذا نظرت إلى المثال الرسمي لـ NextJS مع المكونات المصممة ، فستلاحظ أن لديهم ملف .babelrc به:

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

ثم يجب عليك إضافة هذا البرنامج المساعد إلى devDependencies في ملف package.json الخاص بك

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

ثم قم بتشغيل أمر التثبيت ، yarn install أو npm install وبعد ذلك ستكون على ما يرام!

ملاحظة: تأكد من فتح علامة تبويب واحدة فقط لعمل مطوري المضيف المحلي!

MaxMcKinney في ١٩ أبريل ٢٠١٩

👍37 🎉20 ❤17 🚀10

ال 27 كومينتر

لدي نفس الخطأ ، مع إعداد مختلف. لدي monorepo مع مجلدين:

app مع تطبيقي next.js
ui ، مع "مكتبة ui" الخاصة بي باستخدام مكونات ذات نمط

لدي في مثال الريبو: https://github.com/lucleray/ssr-ui-library

عندما أقوم بتحديث لون الخلفية على سبيل المثال ، في مجلد واجهة المستخدم ، وحفظ الملف ، يتم تحديث الصفحة.
ولكن بعد ذلك ، إذا قمت بتحديث الصفحة ، فستفقد التحديثات.

lucleray في ٣ أبريل ٢٠١٨

هل هذا له علاقة بترتيب الحقن لأوراق الأنماط في <head> ؟

ianregister في ٨ أبريل ٢٠١٨

ianregister لا ، ترتيب الحقن في <head> غير مرتبط

المشكلة هي أن الخادم والعميل لا يعرضان نفس الكود لأوراق الأنماط

lucleray في ٨ أبريل ٢٠١٨

لدي نفس الخطأ وليس فقط على الأنماط. سيؤدي إعادة التحميل السريع إلى التقاط التغييرات ، لكن تحديث المتصفح لا يفعل ذلك. لا بد لي من تشغيل الخادم مرة أخرى (العقدة server.js) لالتقاط آخر تحديث. أنا أستخدم [email protected] ،

sea129 في ١٧ أبريل ٢٠١٨

👍1

@ lucleray ، جرب هذا:

تأكد من أن لديك babel-plugin-styled-components كتبعية وفي الحزمة الخاصة بك. json أخبر بابل أنك تقوم بالعرض من جانب الخادم.

أعتقد أن هذه مجرد مشكلة تكوين تواجهها.

package.json
"" json
"بابل": {
"البيئة": {
"تطوير": {
"الإعدادات المسبقة": ["التالي / بابل"]،
"المكونات الإضافية": [
[
"مكوّنات نمطية"،
{
"ssr": صحيح ،
"displayName": صحيح
}
]
]
} ،
"إنتاج": {
"الإعدادات المسبقة": ["التالي / بابل"]،
"المكونات الإضافية": [
[
"مكوّنات نمطية"،
{
"ssr": صحيح ،
"displayName": خطأ
}
]
]
}
}
}

tvthatsme في ١٨ أبريل ٢٠١٨

👍29 🎉16 🚀6 ❤3

tvthatsme لقد أضفت 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 في ١٨ أبريل ٢٠١٨

وجود مشكلة مماثلة حيث تؤدي أي تعديلات على أحد المكونات (غير ذات صلة بالأنماط) إلى ظهور خطأ "تحذير: لم يتطابق Prop className . الخادم:" على الصفحة الصلبة التالية حديثًا. تحتاج إلى إعادة تشغيل الخادم حتى تختفي.

@ sea129 هل كنت قادرا على إصلاح؟

valeeum في ٢٥ يوليو ٢٠١٨

لول ، تواجه نفس المشكلة هنا. valeeum هل كنت قادرًا على حلها؟

chenshuiluke في ١١ أغسطس ٢٠١٨

لقد أجريت القليل من البحث حول هذه المشكلة ، وأعتقد أنها قد تكون مرتبطة بنوع من "التخزين المؤقت لحزمة الويب".

أستخدم الكود هنا كمثال على المشكلة: 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 في ١٩ أغسطس ٢٠١٨

require على ذاكرة تخزين مؤقت مدمجة ( require.cache ) وهذا هو السلوك المتوقع للاعتماديات في node_modules ، لأننا لن نقوم بتجميع أي شيء داخل node_modules على الخادم (لسرعة التجميع).

timneutkens في ١٩ أغسطس ٢٠١٨

حسنًا ، هذا منطقي.

لذا فإن المشكلة تكمن في أن أداة إعادة التحميل السريع لا تعيد تحميل تغييرات التعليمات البرمجية في التبعيات الخارجية ، من جانب الخادم ، أليس كذلك؟

في المثال الذي قمت بمشاركته ، أتوقع أن يتم تحميل تغييرات التعليمات البرمجية الخاصة بي على كل من العميل (وهذا هو الحال) والخادم (وهذا ليس هو الحال) في وضع التطوير.

lucleray في ٢٠ أغسطس ٢٠١٨

لذا فإن المشكلة تكمن في أن أداة إعادة التحميل السريع لا تعيد تحميل تغييرات التعليمات البرمجية في التبعيات الخارجية ، من جانب الخادم ، أليس كذلك؟

بالضبط ، نحن نحذف فقط المسارات الكاملة من need.cache.

timneutkens في ٢٠ أغسطس ٢٠١٨

كيف تعتقد أنه يمكنني حل هذا timneutkens ؟

هل يجب إزالة @monorepo/ui من التبعيات الخارجية بحيث يتم تجميعها في الحزم من جانب الخادم؟ هذا يعمل ولكن بما أنني أقوم بالفعل بترجمته ، أليس من الأفضل أن أطلبه فقط؟

lucleray في ٢١ أغسطس ٢٠١٨

قد يكون الأمر سهلاً مثل استخدام https://github.com/martpie/next-plugin-transpile-modules لتمكين تجميع الوحدات.

timneutkens في ٨ نوفمبر ٢٠١٨

👎3

timneutkens لماذا تم إغلاق هذا؟ لا تزال هذه المشكلة موجودة في أحدث إصدار

jeankvd في ١٥ مارس ٢٠١٩

👍35

لا تزال تواجه هذه المشكلة أيضا

oscargws في ٦ أبريل ٢٠١٩

👍16

ما زلت أواجه هذه المشكلة أيضًا

asotoglez في ٨ أبريل ٢٠١٩

كما سبق هنا

Ruegen في ١٤ أبريل ٢٠١٩

أيضا وجود هذه المشكلة

تحرير (حل):

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

ثم يجب عليك إضافة هذا البرنامج المساعد إلى devDependencies في ملف package.json الخاص بك

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

ثم قم بتشغيل أمر التثبيت ، yarn install أو npm install وبعد ذلك ستكون على ما يرام!

ملاحظة: تأكد من فتح علامة تبويب واحدة فقط لعمل مطوري المضيف المحلي!

MaxMcKinney في ١٩ أبريل ٢٠١٩

👍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 في ٤ سبتمبر ٢٠١٩

👍2

أيضا وجود هذه المشكلة
تحرير (حل):
تتعلق هذه المشكلة بعدم وجود إعداد تكوين babel بشكل صحيح. إذا نظرت إلى المثال الرسمي لـ NextJS مع المكونات المصممة ، فستلاحظ أن لديهم ملف .babelrc به:
{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}
ثم يجب عليك إضافة هذا البرنامج المساعد إلى devDependencies في ملف package.json الخاص بك
"devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
},
ثم قم بتشغيل أمر التثبيت ، yarn install أو npm install وبعد ذلك ستكون على ما يرام!
ملاحظة: تأكد من فتح علامة تبويب واحدة فقط لعمل مطوري المضيف المحلي!

هذا يعمل شكرا

omendez85 في ٥ سبتمبر ٢٠١٩

👍2

لسوء الحظ ، لا تزال مشكلة.

أنا أشهد شيئًا غريبًا على الرغم من:

اذا كنت تمتلك

styled.h1`
color: red;
`

عند التحميل الأولي يكون لونه أحمر ، عند تغييره إلى

styled.h1`
color: purple;
`

يتم تجاهله ، يصبح النص أسود ، ولا توجد أنماط.
عند إعادة تحميل الصفحة تصبح أرجوانية كما هو متوقع.
ولكن عند تغيير اللون إلى red ، يعمل HMR بشكل صحيح ويصبح النص أحمر.
يمكنك القيام بذلك بأكبر عدد من الألوان إذا كنت تريد ، كما لو كان هناك نوع من التخزين المؤقت يحدث.

لذلك عندما تضيف نمطًا جديدًا عبر HMR ، يتم تجاهله ، ولكن عند التقديم الأولي يتم وضعه في ذاكرة التخزين المؤقت ، وإذا استخدمت هذا النمط لاحقًا عبر HMR ، فسيعمل. إذن لم يتم تسليمها إلى المتصفح بشكل صحيح على HMR؟

ليس لدي أي معرفة بالأمور الداخلية لـ SC و Next.js ، لذا فهذه مجرد تخميناتي.

تعديل:
عملت بشكل جيد على المكونات المصممة 5.0.0-rc.2

TheRusskiy في ٢١ نوفمبر ٢٠١٩

لست متأكدًا من مدى ملاءمة هذه المعلومات ، ولكن كيف أصلحتها بنفسي هو أنني اتبعت المثال من الريبو التالي ودمجت الأجزاء المفقودة قطعة
https://github.com/zeit/next.js/tree/canary/examples/with-typescript-styled-components

Igor2122 في ٣٠ نوفمبر ٢٠١٩

كنت أستخدم next.js و MaxMcKinney حل بالنسبة لي. فقط تأكد من أنك قمت بتكوين تفضيلات .babelrc بشكل صحيح لأنها تنسيق أو مصفوفات وكائنات مربكة تمامًا.

كان هذا ملفي .babelrc على سبيل المثال:

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

limitlessloop في ٣٠ مارس ٢٠٢٠

👍1

سوف تحدث هذه المشكلة إذا كنت الاستنساخ وبناء على واحد من الأمثلة Next.js التي ليس لديها نفس package.json تبعيات و .babelrc الإعدادات. بالإضافة إلى حل MaxMckinney ، تأكد من أن لديك التبعية الصحيحة في package.json . كنت أفتقد "styled-components": "^5.0.0"

CalvinKorver في ٨ مايو ٢٠٢٠

في حالتي ، ما عليك سوى إضافة ملف _app.js و _document.js ضمن Pages floder ، فهو يعمل بشكل جيد.

// _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 في ٢٣ يوليو ٢٠٢٠

👍1

في حالتي ، ما عليك سوى إضافة ملف _app.js و _document.js ضمن Pages floder ، فهو يعمل بشكل جيد.

// _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()
    }
  }
}

كيف يمكنني استخدامه في Material-UI؟