Gatsby page didn't render SSR correctly - Cannot read property 'split' of undefined

Question

I want to make a bilingual form on my website and followed this tutorial. I'm not sure what is undefined here, although I think it has something to do with gatsby-plugin-intl (I thought maybe it's because I don't have a json file for my non-English content, but I added a zh-TW.json and still get the same error. I also get the same error when calling localhost:8000 instead of localhost:8000/contact). The errors only came up after running the npm run extract -- 'src/**/*.js*' --out-file src/intl/en.json --format simple command.

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
            },
        },
    ],
}

browser

 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

terminal

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

@FerranBuireu updated code to show my `gatsby-config.js` - `defaultLanguage` is already set to en — cookiestarninja, Apr 19 '21 at 07:20
@FerranBuireu yes - i'll add it to the code above. is this where i should be looking? i also had a look at the gatsby docs but i don't think any of this applies to my error. https://www.gatsbyjs.com/docs/debugging-html-builds/ — cookiestarninja, Apr 19 '21 at 07:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231307/discussion-between-ferran-buireu-and-cookiestarninja). — Ferran Buireu, Apr 19 '21 at 09:06

score 1 · Answer 1 · answered Aug 08 '21 at 19:28

Errors while building static HTML files (the build-time React SSR process) generally happen for one of the following reasons:

Some of your code references “browser globals” like window or document that aren’t available in Node.js. If this is your problem you should see an error above like “window is not defined”. To fix this, find the offending code and either a) check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or b) if the code is in the render function of a React.js component, move that code into a componentDidMount lifecycle or into a useEffect hook, which ensures the code doesn’t run unless it’s in the browser.

Check that each of your JS files listed in your pages directory (and any sub-directories) are exporting either a React component or string. Gatsby treats any JS file listed under the pages dir as a page component, so it must have a default export that’s a component or string.

You mix up import and require calls in the same file. This might lead to “WebpackError: Invariant Violation: Minified React error #130” since webpack 4 is stricter than v3. The solution is to only use import and this also extends to gatsby-ssr and gatsby-browser files.

Your app doesn’t correctly hydrate in the client, which results in gatsby develop and gatsby build being inconsistent. It’s possible that a change in a file like gatsby-ssr or gatsby-browser has a structure that is not reflected in the other file, meaning that there is a mismatch between client and server output.

Some other reason :-) #1 is the most common reason building static files fail. If it’s another reason, you have to be a bit more creative in figuring out the problem.

How to check if window is defined

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 page didn't render SSR correctly - Cannot read property 'split' of undefined

1 Answers1