Redux, Styled Components and Client-Side Only Error

[jhlabs]

Description

First of all, thanks to Gatsby and the amazing community around it. I am creating a web page with landing pages, that are statically rendered and a /app/* section that requires login through firebase and renders client side. It is a similar setup to the one described in the docs here https://www.gatsbyjs.org/docs/building-apps-with-gatsby/. The /app/* routes are making use of Redux for authentication and redux-form. I am also making use of redux-thunk. With gatsby develop my site builds perfectly, but when I try to build the site the following error shows:

error UNHANDLED EXCEPTION


  TypeError: Cannot read property 'chunk' of undefined

  - Stats.js:93 formatError
    [deedster-web-client]/[webpack]/lib/Stats.js:93:8

  - Array.map

  - Stats.js:123 Stats.toJson
    [deedster-web-client]/[webpack]/lib/Stats.js:123:30

  - build-html.js:55
    [deedster-web-client]/[gatsby]/dist/commands/build-html.js:55:45

  - Compiler.js:194 Compiler.<anonymous>
    [deedster-web-client]/[webpack]/lib/Compiler.js:194:14

  - Compiler.js:282 Compiler.emitRecords
    [deedster-web-client]/[webpack]/lib/Compiler.js:282:37

  - Compiler.js:187 Compiler.<anonymous>
    [deedster-web-client]/[webpack]/lib/Compiler.js:187:11

  - Compiler.js:275
    [deedster-web-client]/[webpack]/lib/Compiler.js:275:11

  - Tapable.js:60 Compiler.applyPluginsAsync
    [deedster-web-client]/[tapable]/lib/Tapable.js:60:69

  - Compiler.js:272 Compiler.afterEmit
    [deedster-web-client]/[webpack]/lib/Compiler.js:272:8

  - Compiler.js:267 Compiler.<anonymous>
    [deedster-web-client]/[webpack]/lib/Compiler.js:267:14

  - async.js:52
    [deedster-web-client]/[async]/lib/async.js:52:16

  - async.js:246 done
    [deedster-web-client]/[async]/lib/async.js:246:17

  - async.js:44
    [deedster-web-client]/[async]/lib/async.js:44:16

  - graceful-fs.js:43
    [deedster-web-client]/[graceful-fs]/graceful-fs.js:43:10


error An unexpected error occurred: "Command failed.
Exit code: 1

I have followed every advice I could find in the issues here on Github and elsewhere, and would be very grateful for any solutions. Thanks a lot!

Steps to reproduce

Run gatsby build.

Expected result

The site should build successfully.

Actual result

The build step throws an error

Environment

• Gatsby version (npm list gatsby): [email protected]
• gatsby-cli version (gatsby --version): 1.1.41
• Node.js version: v8.9.4
• Operating System: MacOS High Sierra

File contents (if changed):

gatsby-config.js:

require('dotenv').config()

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

package.json:

{
  "name": "client",
  "description": "Client",
  "version": "0.0.1",
  "author": "Johannes Herrmann",
  "dependencies": {
    "axios": "^0.18.0",
    "babel-plugin-styled-components": "^1.5.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "dotenv": "^5.0.1",
    "firebase": "^4.8.0",
    "gatsby": "^1.9.127",
    "gatsby-link": "^1.6.30",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "gatsby-plugin-react-next": "^1.0.11",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-plugin-svg-sprite": "^1.0.0",
    "prop-types": "^15.6.0",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-form": "^7.3.0",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.2.3",
    "styled-normalize": "^4.0.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"No test specified\" && exit 0"
  },
  "devDependencies": {
    "prettier": "^1.8.2"
  }
}

gatsby-node.js:

exports.modifyWebpackConfig = function(config, env) {
  if (env === "build-javascript" || env === "develop") {
    config._config.entry.unshift("babel-polyfill");
  }
  return config;
};

exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    if (page.path.match(/^\/signin/) || page.path.match(/^\/signup/)) {
      page.layout = "authLayout";

      createPage(page);
    }
    if (page.path.match(/^\/app/)) {
      page.matchPath = "/app/:path";

      createPage(page);
    }

    resolve();
  });
};

gatsby-browser.js:

import React from "react";
import { Router } from "react-router-dom";
import { Provider } from "react-redux";

import createStore from "./src/state/createStore";

exports.replaceRouterComponent = ({ history }) => {
  const store = createStore();

  const ConnectedRouterWrapper = ({ children }) => (
    <Provider store={store}>
      <Router history={history}>{children}</Router>
    </Provider>
  );

  return ConnectedRouterWrapper;
};

gatsby-ssr.js:

import { ServerStyleSheet, StyleSheetManager } from "styled-components";
import { Provider } from "react-redux";
import React from "react";
import createStore from "./src/state/createStore";
import { renderToString } from "react-dom/server";

exports.replaceRenderer = ({
  bodyComponent,
  replaceBodyHTMLString,
  setHeadComponents
}) => {
  const store = createStore();
  const ConnectedBody = () => (
    <Provider store={store}>{bodyComponent}</Provider>
  );

  const sheet = new ServerStyleSheet();
  const bodyHTML = renderToString(sheet.collectStyles(<ConnectedBody />));
  const styleElement = sheet.getStyleElement();

  replaceBodyHTMLString(bodyHTML);
  setHeadComponents(styleElement);
};

[m-allanson]

This sounds similar to #2360. Maybe there's a non-error value that's not being filtered out?

Could you do a bit of node_modules debugging? In the file node_modules/gatsby/dist/commands/build-html.js around line 54, do some logging and see what the errors are.

if (stats.hasErrors()) {
  console.log(stats.toJson().errors) // <-------------------- Add something like this
  var webpackErrors = stats.toJson().errors.filter(Boolean);
  return reject(webpackErrors.length ? createErrorFromString(webpackErrors[0], `${outputFile}.map`) : new Error(`There was an issue while building the site: ` + `\n\n${stats.toString()}`));
}

[jhlabs]

@m-allanson thanks this seems indeed to be related. When I try to console.log the stats object with .toJson() or .toString() I don't get any response. When I log console.log(stats.errors) I get undefined.

[m-allanson]

So stats.hasErrors() is returning true, but stats.toJson() is returning an empty string? Or do you mean something else by "I don't get any response"?

Maybe there's something else going on here. Are you able to share your repo?

[jhlabs]

I shared the repo with you here on Github. Thanks for your help, I am not able to resolve the error.

[jhlabs]

@m-allanson my error was related to importing firebase correctly. Instead of

import * as firebase from "firebase/app";
import "firebase/auth"

const config = {
  apiKey: process.env.GATSBY_API_KEY,
  authDomain: process.env.GATSBY_AUTH_DOMAIN,
  databaseURL: process.env.GATSBY_DATABASE_URL,
  projectId: process.env.GATSBY_PROJECT_ID,
  storageBucket: process.env.GATSBY_STORAGE_BUCKET,
  messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const auth = firebase.auth();

export {
  auth
};

I changed the file to

import * as firebase from "firebase";

const config = {
  apiKey: process.env.GATSBY_API_KEY,
  authDomain: process.env.GATSBY_AUTH_DOMAIN,
  projectId: process.env.GATSBY_PROJECT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const auth = firebase.auth();

export {
  auth
};

I am not experienced enough to be able to tell why this crashed the build process without returning any error.

[m-allanson]

Hey @jhlabs, I got this to build by wrapping the firebase calls in src/utils/firebase.js in a try catch block and logging the error out:

try {
  const auth = firebase.auth();
} catch (error) {
  console.log('WHAT IS THIS ERROR?', error)
}

Does that work for you?

The chunk error you saw is from webpack trying to format an undefined error, which is pretty awkward to debug! I guess firebase is throwing an error that webpack somehow sees as undefined?

[m-allanson]

Ah, just saw your previous comment. Glad you got it working!

[jhlabs]

@m-allanson thanks for your help! was hard to find that one.