如何解决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>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。