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

问题描述

我想在我的网站上制作双语表格并关注此tutorial。我不确定这里有什么未定义，虽然我认为它与 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>
    )
}

解决方法

构建静态 HTML 文件（构建时 React SSR 过程）时的错误通常由以下原因之一发生：

您的某些代码引用了 Node.js 中不可用的“浏览器全局变量”，例如窗口或文档。如果这是您的问题，您应该会看到上面的错误信息，例如“窗口未定义”。要解决此问题，请找到有问题的代码，然后 a) 在调用代码之前检查窗口是否已定义，以便在 Gatsby 构建时代码不会运行（请参阅下面的代码示例）或 b) 如果代码在一个 React.js 组件，将该代码移动到 componentDidMount 生命周期或 useEffect 钩子中，以确保代码不会运行，除非它在浏览器中。

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

您在同一个文件中混淆了 import 和 require 调用。这可能会导致“WebpackError: Invariant Violation: Minified React error #130”，因为 webpack 4 比 v3 更严格。解决方案是只使用导入，这也扩展到 gatsby-ssr 和 gatsby-browser 文件。

您的应用程序在客户端没有正确地 hydration，这会导致 gatsby 开发和 gatsby 构建不一致。 gatsby-ssr 或 gatsby-browser 等文件中的更改可能具有未反映在其他文件中的结构，这意味着客户端和服务器输出之间存在不匹配。

其他一些原因:-) #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>
}

gatsby gatsby-plugin-intl javascript server-side-rendering

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

问题描述

解决方法

相关问答