Gatsby页面没有正确呈现SSR -无法读取未定义的属性“拆分”

Question

我想在我的网站上做一个双语表格，并遵循这个教程。我不知道在这里什么是未定义的，虽然我认为它与gatsby-plugin-intl有关(我想可能是因为我没有一个json文件来处理我的非英语内容，但是我添加了一个zh-TW.json，但是仍然得到了相同的错误。)在调用localhost:8000而不是localhost:8000/contact时，我也会得到相同的错误。只有在运行npm run extract -- 'src/**/*.js*' --out-file src/intl/en.json --format simple命令之后才会出现错误。

gatsby-config.js

const supportedLanguages = [
    { id: 'en', label: 'English' },
    { id: 'zh-TW', label: '中文 (繁體)' },
  ]

const defaultLanguage = 'en'

module.exports = {
    siteMetadata: {
        title: `Gatsby Markdown Blog`,
        description: `Learn how to make a blog with Gatsby and Markdown posts.`,
    },
    plugins: [
        {
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: [`.mdx`, `.md`],
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `posts`,
                path: `${__dirname}/src/posts`,
            },
        },
        {
            resolve: `gatsby-plugin-intl`,
            options: {
                path: `${__dirname}/src/intl`,
                languages: supportedLanguages,
                defaultLanguage: defaultLanguage,
                redirect: true,  // switch to false when zh content ready to prevent gatsby-plugin-intl from auto-redirecting to default language versions
            },
        },
    ],
}

浏览器

 React components in Gatsby must render successfully in the browser and in a node.js environment. When we tried to render your page component in node.js, it errored.

    URL path: /contact/
    File path: undefined

终端

warn The path "/contact/" errored during SSR.

    Edit its component undefined to resolve the error.

 ERROR

Cannot read property 'split' of undefined



  TypeError: Cannot read property 'split' of undefined

  - render-dev-html-child.js:65 parseError
    [blog]/[gatsby]/src/utils/dev-ssr/render-dev-html-child.js:65:26

  - render-dev-html-child.js:166
    [blog]/[gatsby]/src/utils/dev-ssr/render-dev-html-child.js:166:23

  - new Promise

  - render-dev-html-child.js:135 Object.exports.renderHTML
    [blog]/[gatsby]/src/utils/dev-ssr/render-dev-html-child.js:135:3

  - processChild.js:155 execFunction
    [blog]/[jest-worker]/build/workers/processChild.js:155:17

  - processChild.js:139 execHelper
    [blog]/[jest-worker]/build/workers/processChild.js:139:5

  - processChild.js:143 execMethod
    [blog]/[jest-worker]/build/workers/processChild.js:143:5

  - processChild.js:64 process.<anonymous>
    [blog]/[jest-worker]/build/workers/processChild.js:64:7

  - node:events:369 process.emit
    node:events:369:20

  - source-map-support.js:495 process.emit
    [blog]/[source-map-support]/source-map-support.js:495:21

src/components/Form.js

import React from "react";
import { FormattedMessage, useIntl } from "gatsby-plugin-intl";

const Form = () => {
  const intl = useIntl(); // hook; pass in object that contains id and default message to ensure that 
  return (
    <div>
      <label for="email">
        <FormattedMessage id="email_label" defaultMessage="Email address" /> {/* pass id and defaultMessage down as props to render new string inside of a react fragment child element  */}
      </label>
      <input
        type="email"
        id="email"
        placeholder={intl.formattedMessage({
          id: "email_input",
          defaultMessage: "Email address",
        })}
      />
      
      <label for="Password">
        <FormattedMessage id="password_label" defaultMessage="Password" />
      </label>
      <input type="password" id="password" />
      <button type="submit" onSubmit={this.handleSubmit}>
        <FormattedMessage id="submit_button" defaultMessage="submit" />
      </button>
    </div>
  );
};

export default Form;

src/intl/en.json

{
  "email_label": "Email address",
  "password_label": "Password",
  "submit_button": "submit"
}

src/intl/zh-TW.json

{
  "email_label": "電郵地址",
  "password_label": "密碼",
  "submit_button": "提交"
}

src/pages/contact.js

import React from 'react'
import styled from 'styled-components'

import Navbar from '../components/Navbar.js'
import Form from '../components/Form.js'

const Body = styled.body`
    margin-left: 6%;
`

export default function Contact() {
    return (
        <div>
            <Navbar/>
            <Body>
            <Form/>
            </Body>
        </div>
    )
}

Answer 1

构建静态HTML文件(构建时响应SSR过程)时发生错误通常有以下原因之一：

您的一些代码引用了“浏览器全局”(Browser Globals)，比如Node.js中不可用的窗口或文档。如果这是您的问题，您应该会在上面看到一个错误，比如“没有定义窗口”。要解决这一问题，请查找违规代码，并在调用代码之前进行检查，如果定义了代码窗口，使代码在盖茨比构建时不会运行(请参阅下面的代码示例)，如果代码位于React.js组件的呈现函数中，则将该代码移动到componentDidMount生命周期或useEffect钩子中，这将确保代码在浏览器中才能运行。

检查页面目录(和任何子目录)中列出的每个JS文件是否导出了一个React组件或字符串。Gatsby将页面dir下列出的任何JS文件视为页面组件，因此它必须具有一个默认导出，即组件或字符串。

您混淆了导入，并要求在同一个文件中调用。这可能导致“WebpackError:不变违反:缩小反应错误#130”，因为webpack 4比v3更严格。解决方案是只使用导入，这也扩展到盖茨比-ssr和盖茨比浏览器文件。

您的应用程序在客户端没有正确的水合物，这导致盖茨比开发和盖茨比构建不一致。gatsby或gatsby等文件中的更改可能没有反映在另一个文件中，这意味着客户机和服务器输出之间存在不匹配。

其他一些原因:-) #1是构建静态文件失败的最常见原因。如果这是另一个原因，你必须更有创造性地解决问题。

如何检查是否定义了窗口

import * as React from "react"

// Check if window is defined (so if in the browser or in node.js).
const isBrowser = typeof window !== "undefined"

export default function MyComponent() {
  let loggedIn = false
  if (isBrowser) {
    window.localstorage.getItem("isLoggedIn") === "true"
  }

  return <div>Am I logged in? {loggedIn}</div>
}