Gatsby: WebpackError: TypeError: Cannot read property of undefined during build

[Daavidaviid]

Description

Hi,
I get this error :

See our docs page for more info on this error: https://gatsby.dev/debug-html


  12 |   const dispatch = useDispatch();
  13 |   console.log({ props, pageContext: props.pageContext });
> 14 |   const article = props.pageContext.article;
     |                                     ^
  15 | 
  16 |   const [quantity, setQuantity] = useState(0);
  17 | 


  WebpackError: TypeError: Cannot read property 'article' of undefined

Only when I'm trying to make a build with gatsby, but it works great when I develop.

The worst is that I can get the log result just before the error :

{
  props: {
    path: '/*',
    '*': 'article/sku_GhehHOoRv8nuUy',
    uri: '/',
    location: { pathname: '/article/sku_GhehHOoRv8nuUy', search: '', hash: '' },
    navigate: [Function: navigate],
    children: undefined,
    pageContext: { article: [Object] },
    pathContext: { article: [Object] }
  },
  pageContext: {
    article: {
      id: 'sku_GhehHOoRv8nuUy',
      active: true,
      currency: 'eur',
      price: 500,
      attributes: [Object],
      localFiles: [Array],
      product: [Object]
    }
  }
}

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue _much_ easier to diagnose (seriously).

How to Make a Minimal Reproduction: https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

Expected result

Build successfully

Actual result

Build fails.

Environment

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.3.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 67.0.2
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7
    gatsby-image: ^2.2.39 => 2.2.39
    gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5
    gatsby-plugin-firebase: ^0.1.8 => 0.1.8
    gatsby-plugin-manifest: ^2.2.39 => 2.2.39
    gatsby-plugin-offline: ^3.0.34 => 3.0.34
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
    gatsby-plugin-sass: ^2.1.28 => 2.1.28
    gatsby-plugin-sharp: ^2.4.3 => 2.4.3
    gatsby-plugin-stripe: ^1.2.3 => 1.2.3
    gatsby-plugin-typescript: ^2.1.27 => 2.1.27
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^2.1.46 => 2.1.46
    gatsby-source-stripe: ^3.0.5 => 3.0.5
    gatsby-transformer-sharp: ^2.3.13 => 2.3.13

[blainekasten]

Hey David! This feels peculiar! We would need more information to help diagnose. Specifically can you properly fill out the Steps to reproduce part of the issue template and link us to a repo that reproduces the issue?

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[hal-efecan]

i'm experiencing the same when it comes to build - works perfectly fine during development

[madalynrose]

I agree this sounds odd. Could either @hal-efecan or @Daavidaviid provide additional context by linking a repo or producing a minimal reproduction in something like codesandbox? We can help debug once we have more information.

[hal-efecan]

Hi @madalynrose

thanks for coming back.
here's the link to the repo is https://github.com/hal-efecan/themavenist

Runs successfully during development however when i run the build script i get the below.

 ERROR #95313 

Building static HTML failed for path "/product/parkgate"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  12 |         <div className={shoppingStyles.container}>
  13 |             { 
> 14 |                 cart_context.qty === 0 ? <div></div> : 
     |                              ^
  15 |                 <div className={shoppingStyles.circle}>{cart_context.qty}</div> 
  16 |             }
  17 |             <img style={{ padding: "0", margin: "0"}} src={bag} width="30px" alt="Logo" />


  WebpackError: TypeError: Cannot read property 'qty' of undefined

  - bag.js:14 Bag
    src/components/bag.js:14:30


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/halil/.npm/_logs/2020-04-17T21_36_49_564Z-debug.log

The error seems to originate from the
src >components >bag which pulls from
src> context> cartProvider

import React, { useState, createContext } from 'react'
import { formatPrice } from '../utils/utilityFn'

export const CartContext = createContext()

const CartProvider = (props) => {

    const initialState = []

    const [ cart, setCart ] = useState(initialState)
    const [ qty, setQty ] = useState(0)
    const [ val, setVal ] = useState(0)

Seems like a similar setup to @Daavidaviid

[hal-efecan]

Okay, so i managed to solve my bug by simply adding an operator to check cart_context before moving to cart_context.qty

Not sure why it's forgiving in the development stage vs build process though.

Before:

  12 |         <div className={shoppingStyles.container}>
  13 |             { 
> 14 |                 cart_context.qty === 0 ? <div></div> : 
     |                              ^
  15 |                 <div className={shoppingStyles.circle}>{cart_context.qty}</div> 
  16 |             }
  17 |             <img style={{ padding: "0", margin: "0"}} src={bag} width="30px" alt="Logo" />

After:

{

cart_context && cart_context.qty !== 0 ?

<div className={shoppingStyles.container}>
        <div className={shoppingStyles.circle}>
                { cart_context && cart_context.qty }
        </div>  
        <img style={{ padding: "0", margin: "0"}} src={bag} width="30px" alt="Logo" />
</div> :
null

}

[wardpeet]

@hal-efecan It seems like you only have wrapRootElement in gatsby-browser.js. You should have the same code into gatsby-ssr.js so code paths are the same.

Here's an example that shows how to do it https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux

Thank you for opening this

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[hal-efecan]

Thanks @wardpeet - this did the trick! I used the Gatsby starter blog which didn't come with Gatsby SSR out of the box so naively assumed that it wasn't required. I removed the operator i used earlier and included the SSR file mirroring gatsby-browser.js and now everything is in sync and working as expected.