文章/答案/技术大牛

发布

社区首页 >问答首页 >使用SSR和样式组件构建NextJS错误

问使用SSR和样式组件构建NextJS错误
EN

Stack Overflow用户

提问于 2021-03-16 09:25:46

回答 2查看 1.2K关注 0票数 1

我正在向Vercel部署一个NextJS应用程序，并使用styled-components。这是我的_document.tsx文件：

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
import flush from 'styled-jsx/server'

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)
      const styledJSXStyles = flush()
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
            {styledJSXStyles}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

我从Vercel那里看到的错误是document is not defined at new StyleSheet

02:22:23    > Build error occurred
02:22:23    ReferenceError: document is not defined
02:22:23        at new StyleSheet (/vercel/workpath0/node_modules/styled-jsx/dist/lib/stylesheet.js:40:35)
02:22:23        at new StyleSheetRegistry (/vercel/workpath0/node_modules/styled-jsx/dist/stylesheet-registry.js:26:33)
02:22:23        at Object.<anonymous> (/vercel/workpath0/node_modules/styled-jsx/dist/style.js:15:26)
02:22:23        at Module._compile (internal/modules/cjs/loader.js:1063:30)
02:22:23        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
02:22:23        at Module.load (internal/modules/cjs/loader.js:928:32)
02:22:23        at Function.Module._load (internal/modules/cjs/loader.js:769:14)
02:22:23        at Module.require (internal/modules/cjs/loader.js:952:19)
02:22:23        at require (internal/modules/cjs/helpers.js:88:18)
02:22:23        at Object.<anonymous> (/vercel/workpath0/node_modules/styled-jsx/dist/server.js:9:14)
02:22:23        at Module._compile (internal/modules/cjs/loader.js:1063:30)
02:22:23        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
02:22:23        at Module.load (internal/modules/cjs/loader.js:928:32)
02:22:23        at Function.Module._load (internal/modules/cjs/loader.js:769:14)
02:22:23        at Module.require (internal/modules/cjs/loader.js:952:19)
02:22:23        at require (internal/modules/cjs/helpers.js:88:18)

我的假设是，在文档文件中使用SeverStyleSheet可以解决这种情况，但情况似乎并非如此。

下面是我尝试过的事情：

支持样式-组件和样式-jsx(我不使用后者，这是npm run build)

Check的依赖部分和本地构建的源)的
更新_document.tsx (在呈现的iFrame w/ dangerouslySetInnerHTML

之前，在任何component

Commented中调用fetch之前，
都可以使用index.tsx中的窗口对象和window.fetch存在的窗口对象进行构建。

我还没有考虑过什么？

next.js

styled-components

server-side-rendering

vercel

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-16 21:19:49

原来的问题是NextJS的旧版本，将我的版本从10.0.6增加到10.0.9解决了这个问题。

票数 1

Stack Overflow用户

发布于 2021-03-16 12:32:48

您可以使用以下示例测试您的_document.tsx：

import React from 'react'
import Document, {
  DocumentContext,
  DocumentInitialProps,
  Head,
  Html,
  Main,
  NextScript
} from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    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()
    }
  }

  render(): JSX.Element {
    return (
      <Html lang="en">
        <Head>
          <title>your app title</title>
          <meta charSet="utf-8" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66652352

复制

相似问题

问使用SSR和样式组件构建NextJS错误
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用SSR和样式组件构建NextJS错误EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用SSR和样式组件构建NextJS错误
EN