خطأ في _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

محمد أبو عواد

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية