我正在将NextJS应用程序部署到Vercel，我使用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可以解决这种情况，但事实并非如此。
以下是我从那以后尝试过的东西：
- 更新_document.tsx(如上所示(以支持样式组件和样式jsx(我不使用后者，这是NextJS的依赖部分，也是错误的来源(
- 尝试在本地生成(使用
npm run build生成很好( - 检查index.tsx和_app.tsx中是否存在窗口对象
- 在任何组件中调用
fetch之前，检查是否存在window.fetch - 注释掉了带有dangerouslySetInnerHTML的渲染iFrame
我还没有考虑什么？
您可以使用以下示例测试您的_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>
)
}
}
原来这个问题是由旧版本的NextJS引起的，将我的版本从10.0.6提升到10.0.9解决了这个问题。