1

我想在我的网站上制作一个双语表格并按照本教程进行操作。我不确定这里有什么未定义，尽管我认为它与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命令后出现。

盖茨比-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>
    )
}
4

1 回答 1

1

构建静态 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 文件。

您的应用程序在客户端中没有正确补水，导致 gatsby develop 和 gatsby build 不一致。像 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>
}
于 2021-08-08T19:28:31.730 回答