خطأ في _document.js عندما أعمل build في nextjs

عبد النور محمد · 11 سبتمبر 2021

لدي الملف document.js_

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

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet();

    // Step 2: Retrieve styles from components in the page
    const page = renderPage(
      (App) => (props) => sheet.collectStyles(<App {...props} />)
    );

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement();

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>
          <title>My app</title>
          {/* Step 5: Output the styles in the head  */}
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

عندما أعمل build أحصل على هذا الخطأ رغم ان الملف في مجلد pages

3:1  Error: next/document should not be imported outside of pages/_document.js. 
See https://nextjs.org/docs/messages/no-document-import-in-page.  @next/next/no-document-import-in-page
13:38  Error: Component definition is missing display name  react/display-name

تم التعديل في 11 سبتمبر 2021 بواسطة عبد النور محمد

محمد أبو عواد · 11 سبتمبر 2021

هذه مشكلة تم ظهورها في آخر تحديث لـ Nextjs, ولإصلاحها يجب ترقية Nextjs إلى هذا الإصدار 11.1.3-canary.7 من خلال الأمر التالي

npm i next@11.1.3-canary.7

,وإذا كنت لا تزال تواجه نفس الخطأ ، فتأكد من مسح ذاكرة التخزين الموقت للمتصفح من خلال تحديث الصفحة بالضغط على الزرين ctrl+f5 , ومسح ذاكرة التخزين الموقت ل npm من خلال الأمر التالي

npm cache clean --force

خطأ في _document.js عندما أعمل build في nextjs

السؤال

عبد النور محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

محمد أبو عواد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية