Javascript 盖茨比·佩奇没有'；t正确呈现SSR-无法读取属性'；拆分'；未定义的_Javascript_Gatsby_Server Side Rendering_Gatsby Plugin Intl

Javascript 盖茨比·佩奇没有'；t正确呈现SSR-无法读取属性'；拆分'；未定义的

javascript gatsby

Javascript 盖茨比·佩奇没有'；t正确呈现SSR-无法读取属性'；拆分'；未定义的,javascript,gatsby,server-side-rendering,gatsby-plugin-intl,Javascript,Gatsby,Server Side Rendering,Gatsby Plugin Intl,我想在我的网站上制作一个双语表格，并遵循以下步骤。我不确定这里没有定义什么，尽管我认为它与gatsby plugin intl（我想可能是因为我的非英语内容没有json文件，但我添加了一个zh-TW.json，仍然会出现相同的错误。我在调用localhost:8000而不是localhost:8000/contact时也会出现相同的错误）。只有在运行npm run extract--'src/***.js*'--输出文件src/intl/en.json--format simple命令后，才会出

我想在我的网站上制作一个双语表格，并遵循以下步骤。我不确定这里没有定义什么，尽管我认为它与

gatsby plugin intl

（我想可能是因为我的非英语内容没有json文件，但我添加了一个zh-TW.json，仍然会出现相同的错误。我在调用

localhost:8000

而不是

localhost:8000/contact

时也会出现相同的错误）。只有在运行

npm run extract--'src/***.js*'--输出文件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
            },
        },
    ],
}

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;

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>
    )
}

浏览器

 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/intl/zh TW.json

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

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

src/pages/contact.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
            },
        },
    ],
}

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;

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>
    )
}

从“React”导入React
从“样式化组件”导入样式化
从“../components/Navbar.js”导入导航栏
从“../components/Form.js”导入表单
const Body=styled.Body`
左缘：6%；
`
导出默认函数联系人（）{
返回(
)
}

您是否尝试添加了

en

回退？@FerranBuireu更新了代码以显示我的

gatsby config.js

defaultLanguage

已设置为enI，这意味着如果您有英语的jsonlocale@FerranBuireu我的json既有

en

又有

zh-TW

，它们的键完全相同？