Gatsby: [v2] TypeError: Cannot read property 'split' of null when building

Created on 23 Jul 2018 · 5Comments · Source: gatsbyjs/gatsby

Description

I've forked and migrated rwieruch's gatsby-firebase-authentication to v2 here.

gatsby develop works as expected, but when running gatsby build I get the following error:

TypeError: Cannot read property 'split' of null

  - errors.js:50 createErrorFromString
    [gatsby-firebase-authentication]/[gatsby-cli]/lib/reporter/errors.js:50:34

  - build-html.js:56 renderHTMLQueue.then.catch.e
    [gatsby-firebase-authentication]/[gatsby]/dist/commands/build-html.js:56:18

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9

Steps to reproduce

git clone [email protected]:ckj/gatsby-firebase-authentication.git
cd gatsby-firebase-authentication
yarn install
gatsby build

Environment

System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.1 - ~/.nvm/versions/node/v8.9.1/bin/node
Yarn: 1.3.2 - ~/.nvm/versions/node/v8.9.1/bin/yarn
npm: 5.5.1 - ~/.nvm/versions/node/v8.9.1/bin/npm
Browsers:
Chrome: 67.0.3396.99
Firefox: 59.0.3
Safari: 11.1.1
npmPackages:
gatsby: next => 2.0.0-beta.55
gatsby-plugin-react-helmet: next => 3.0.0-beta.4
gatsby-plugin-react-next: next => 2.0.1-13
npmGlobalPackages:
gatsby-cli: 2.0.0-beta.7

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Firebase Authentication`,
  },
  plugins: [`gatsby-plugin-react-helmet`, `gatsby-plugin-react-next`],
}

package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

question or discussion

Source

ckj

👍1

Most helpful comment

@m-allanson Ah, that makes a ton of sense. I assumed by the strange build error that it was something more sinister. Wrapping the firebase functions did the trick:

let db, auth;

if(typeof window !== "undefined") {
  db = firebase.database();
  auth = firebase.auth();
}

Thanks for your help!

ckj on 25 Jul 2018

👍5 🎉2

All 5 comments

Hey @ckj, thanks for providing the demo repo, that makes it much easier to investigate these sorts of issues 👍

It looks like calling firebase.auth() is what triggers the error. I guess the auth function expects to always run in a browser environment? During gatsby build, Gatsby runs your code in a Node.js environment to render out all your static html files, so browser globals like window don't exist.

There are some workarounds suggested in https://github.com/gatsbyjs/gatsby/issues/6386. Want to try that out and report back? If that's the fix, I wonder if we can document this somewhere?

Other things to note - you can remove gatsby-plugin-react-next for Gatsby v2. And it looks like you have some firebase API keys stored in your repo. I'd guess they shouldn't be there? If not then delete them and make sure to get a fresh set of API keys from firebase.

Hope that helps!

m-allanson on 24 Jul 2018

@m-allanson Ah, that makes a ton of sense. I assumed by the strange build error that it was something more sinister. Wrapping the firebase functions did the trick:

let db, auth;

if(typeof window !== "undefined") {
  db = firebase.database();
  auth = firebase.auth();
}

Thanks for your help!

ckj on 25 Jul 2018

👍5 🎉2

To be fair, we should handle those in nicer manner - real error message was hidden ... because of error in code that tries to prettify original error.

pieh on 25 Jul 2018

@pieh Do you know if there were any updates on better error handling?
I get the same error with split, but I would love to somehow see the original error and understand where it comes from