Gatsby: WebpackError: TypeError: Cannot read property 'title' of undefined

[jonthedev]

Description

Hello, I am trying to get my website online.

I get a webpack error from netlify when attempting to build the website. Everything works locally.

Steps to reproduce

https://github.com/jonthedev/webdev-portfolio

1. git clone
2. npm install
3. create .env file in root directory and create your own CONTENTFUL_SPACE_ID & CONTENTFULL_ACCESS_TOKEN variables.
4. greate repo on git hub
5. create netlify account and link repo
6. push to netlify

Expected result

I expect the project to build like it does locally

Actual result

I get this webpack error on build?

Deploy log on netlify
11:34:19 PM: [WARNING] We are experiencing internal issues storing deploy logs. Some log lines may be missing.
11:35:07 PM: > [email protected] postinstall /opt/build/repo/node_modules/cwebp-bin
11:35:07 PM: > node lib/install.js
11:35:07 PM: ✔ cwebp pre-build test passed successfully
11:35:07 PM: > [email protected] postinstall /opt/build/repo/node_modules/mozjpeg
11:35:07 PM: > node lib/install.js
11:35:08 PM: ✔ mozjpeg pre-build test passed successfully
11:35:08 PM: > [email protected] postinstall /opt/build/repo/node_modules/pngquant-bin
11:35:08 PM: > node lib/install.js
11:35:08 PM: ✔ pngquant pre-build test passed successfully
11:35:08 PM: > [email protected] postinstall /opt/build/repo/node_modules/node-sass
11:35:08 PM: > node scripts/build.js
11:34:19 PM: Build ready to start
11:34:24 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:34:24 PM: build-image tag: v3.3.2
11:34:24 PM: buildbot version: ef8d0929ed0baabafd8bbb7d0b021e1fc24180c0
11:34:24 PM: Fetching cached dependencies
11:34:25 PM: Failed to fetch cache, continuing with build
11:34:25 PM: Starting to prepare the repo for build
11:34:25 PM: No cached dependencies found. Cloning fresh repo
11:34:25 PM: git clone https://github.com/jonthedev/webdev-portfolio
11:34:25 PM: Preparing Git Reference refs/heads/master
11:34:26 PM: Starting build script
11:34:26 PM: Installing dependencies
11:34:27 PM: Downloading and installing node v10.16.0...
11:34:28 PM: Downloading https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz...
11:34:28 PM:

#

11:34:28 PM: 28.2%
11:34:28 PM:

#

11:34:28 PM: ##################### 96.9%
11:34:28 PM:

################################################################## 100.0%

11:34:28 PM: Computing checksum with sha256sum
11:34:28 PM: Checksums matched!
11:34:31 PM: Now using node v10.16.0 (npm v6.9.0)
11:34:31 PM: Attempting ruby version 2.6.2, read from environment
11:34:32 PM: Using ruby version 2.6.2
11:34:33 PM: Using PHP version 5.6
11:34:33 PM: Started restoring cached node modules
11:34:33 PM: Finished restoring cached node modules
11:34:33 PM: Installing NPM modules using NPM version 6.9.0
11:35:02 PM: > [email protected] install /opt/build/repo/node_modules/sharp
11:35:02 PM: > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
11:35:03 PM: info
11:35:03 PM: sharp
11:35:03 PM: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-linux-x64.tar.gz
11:35:05 PM: > [email protected] install /opt/build/repo/node_modules/node-sass
11:35:05 PM: > node scripts/install.js
11:35:05 PM: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-64_binding.node
11:35:06 PM: Download complete
11:35:06 PM: Binary saved to /opt/build/repo/node_modules/node-sass/vendor/linux-x64-64/binding.node
11:35:06 PM: Caching binary to /opt/buildhome/.npm/node-sass/4.12.0/linux-x64-64_binding.node
11:35:06 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js
11:35:06 PM: > node scripts/postinstall || echo "ignore"
11:35:06 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
11:35:06 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
11:35:06 PM: > https://opencollective.com/core-js
11:35:06 PM: > https://www.patreon.com/zloirock
11:35:06 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
11:35:06 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js-pure
11:35:06 PM: > node scripts/postinstall || echo "ignore"
11:35:06 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
11:35:06 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
11:35:06 PM: > https://opencollective.com/core-js
11:35:06 PM: > https://www.patreon.com/zloirock
11:35:06 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
11:35:07 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby-telemetry
11:35:07 PM: > node src/postinstall.js
11:35:08 PM: Binary found at /opt/build/repo/node_modules/node-sass/vendor/linux-x64-64/binding.node
11:35:09 PM: Testing binary
11:35:09 PM: Binary is fine
11:35:11 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
11:35:11 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
11:35:11 PM: added 1932 packages from 1043 contributors and audited 32680 packages in 37.414s
11:35:11 PM: found 0 vulnerabilities
11:35:11 PM: NPM modules installed
11:35:12 PM: Started restoring cached go cache
11:35:12 PM: Finished restoring cached go cache
11:35:12 PM: unset GOOS;
11:35:12 PM: unset GOARCH;
11:35:12 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
11:35:12 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
11:35:12 PM: go version >&2;
11:35:12 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
11:35:12 PM: go version go1.12 linux/amd64
11:35:12 PM: Installing missing commands
11:35:12 PM: Verify run directory
11:35:12 PM: Executing user command: gatsby build
11:35:14 PM: success open and validate gatsby-configs — 0.005
11:35:15 PM: success load plugins — 0.729
11:35:15 PM: success onPreInit — 0.006
11:35:15 PM: success delete html and css files from previous builds — 0.006
11:35:15 PM: success initialize cache — 0.007
11:35:15 PM: success copy gatsby files — 0.019
11:35:15 PM: success onPreBootstrap — 0.013
11:35:15 PM: Starting to fetch data from Contentful
11:35:15 PM: Fetching default locale
11:35:15 PM: default locale is : en-US
11:35:15 PM: contentTypes fetched 1
11:35:15 PM: Updated entries 1
11:35:15 PM: Deleted entries 0
11:35:15 PM: Updated assets 1
11:35:15 PM: Deleted assets 0
11:35:15 PM: Fetch Contentful data: 255.928ms
11:35:15 PM: success source and transform nodes — 0.397
11:35:15 PM: success building schema — 0.318
11:35:15 PM: success createPages — 0.030
11:35:15 PM: success createPagesStatefully — 0.036
11:35:15 PM: success onPreExtractQueries — 0.001
11:35:15 PM: success update schema — 0.021
11:35:16 PM: success extract queries from components — 0.088
11:35:16 PM: success write out requires — 0.003
11:35:16 PM: success write out redirect data — 0.001
11:35:16 PM: success onPostBootstrap — 0.000
11:35:16 PM: info bootstrap finished - 3.968 s
11:35:16 PM: success run static queries — 0.017 — 4/4 252.13 queries/second
11:35:30 PM: success Building production JavaScript and CSS bundles — 14.489
11:35:30 PM: success Rewriting compilation hashes — 0.001
11:35:30 PM: success run page queries — 0.086 — 9/9 106.06 queries/second
11:35:32 PM: { data: { target: { sys: [Object], fields: [Object] } },
11:35:32 PM: content: [],
11:35:32 PM: nodeType: 'embedded-asset-block' }
11:35:32 PM: error Building static HTML failed for path "/projectCard/"
11:35:32 PM: See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
11:35:32 PM: 10 |
11:35:32 PM: 11 | const ProjectCard = props => {
11:35:32 PM: > 12 | const { title, tech, desc, url, github } = props.project;
11:35:32 PM: | ^
11:35:32 PM: 13 |
11:35:32 PM: 14 |
11:35:32 PM: 15 | return (
11:35:32 PM:
11:35:32 PM: WebpackError: TypeError: Cannot read property 'title' of undefined
11:35:32 PM:
11:35:32 PM: - projectCard.js:12 ProjectCard
11:35:32 PM: lib/src/pages/projectCard.js:12:11
11:35:32 PM:
11:35:32 PM: - bootstrap:22 c
11:35:32 PM: lib/webpack/bootstrap:22:1
11:35:32 PM:
11:35:32 PM: - bootstrap:25 Sa
11:35:32 PM: lib/webpack/bootstrap:25:1
11:35:32 PM:
11:35:32 PM: - bootstrap:30 a.render
11:35:32 PM: lib/webpack/bootstrap:30:1
11:35:32 PM:
11:35:32 PM: - bootstrap:30 a.read
11:35:32 PM: lib/webpack/bootstrap:30:1
11:35:32 PM:
11:35:32 PM: - bootstrap:42 renderToString
11:35:32 PM: lib/webpack/bootstrap:42:1
11:35:32 PM:
11:35:32 PM: - static-entry.js:215 Module../.cache/static-entry.js.__webpack_exports__.defa ult
11:35:32 PM: lib/.cache/static-entry.js:215:18
11:35:32 PM:
11:35:32 PM: - bootstrap:24 Promise
11:35:32 PM: lib/webpack/bootstrap:24:1
11:35:32 PM:
11:35:32 PM:
11:35:32 PM: - gatsby-browser-entry.js:59 Promise._resolveFromExecutor
11:35:32 PM: lib/.cache/gatsby-browser-entry.js:59:10
11:35:32 PM:
11:35:32 PM: - bootstrap:68 new Promise
11:35:32 PM: lib/webpack/bootstrap:68:1
11:35:32 PM:
11:35:32 PM:
11:35:32 PM: - bootstrap:5 tryCatcher
11:35:32 PM: lib/webpack/bootstrap:5:1
11:35:32 PM:
11:35:32 PM: - bootstrap:50 MappingPromiseArray._promiseFulfilled
11:35:32 PM: lib/webpack/bootstrap:50:1
11:35:32 PM:
11:35:32 PM: - api-runner-ssr.js:8 MappingPromiseArray.PromiseArray._iterate
11:35:32 PM: lib/.cache/api-runner-ssr.js:8:1
11:35:32 PM:
11:35:32 PM: - bootstrap:67 MappingPromiseArray.init
11:35:32 PM: lib/webpack/bootstrap:67:1
11:35:32 PM:
11:35:32 PM:
11:35:32 PM: Skipping functions preparation step: no functions directory set
11:35:32 PM: Caching artifacts
11:35:32 PM: Started saving node modules
11:35:32 PM: Finished saving node modules
11:35:32 PM: Started saving pip cache
11:35:32 PM: Finished saving pip cache
11:35:32 PM: Started saving emacs cask dependencies
11:35:32 PM: Finished saving emacs cask dependencies
11:35:32 PM: Started saving maven dependencies
11:35:32 PM: Finished saving maven dependencies
11:35:32 PM: Started saving boot dependencies
11:35:32 PM: Finished saving boot dependencies
11:35:32 PM: Started saving go dependencies
11:35:32 PM: Finished saving go dependencies
11:35:35 PM: Error running command: Build script returned non-zero exit code: 1
11:35:35 PM: Failing build: Failed to build site
11:35:35 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
11:35:35 PM: Finished processing build request in 1m10.477215896s

To troubleshoot I first logged out the props to make sure I am destructuring the right data which seemed fine. Then I used react dev tools which shows my data inside my project card component when ran locally.

Environment

System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.9.0 - /usr/local/bin/node
Yarn: 1.12.3 - ~/.yarn/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.100
Firefox: 66.0.5
Safari: 12.1.1
npmPackages:
gatsby: ^2.9.11 => 2.9.11
gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
gatsby-plugin-sass: ^2.1.0 => 2.1.0
gatsby-plugin-sharp: ^2.2.1 => 2.2.1
gatsby-remark-images: ^3.1.0 => 3.1.0
gatsby-remark-relative-images: ^0.2.2 => 0.2.2
gatsby-source-contentful: ^2.1.3 => 2.1.3
gatsby-source-filesystem: ^2.1.0 => 2.1.0
gatsby-transformer-remark: ^2.5.0 => 2.5.0
npmGlobalPackages:
gatsby-cli: 2.6.13

source directory

Projects.js
projects.js

ProjectCard.js
ProjectCard.js

gatsby-config.js

[pieh]

Hey @jonthedev!

You have ProjectCard component inside /src/pages of your project and Gatsby will automatically try to create page for it.

In there you tried to access props.project ( https://github.com/jonthedev/webdev-portfolio/blob/015d3e7f34d551a33a6a83c05e6edc12e7e657da/src/pages/projectCard.js#L15 ) which won't exist for page.

I think moving projectCard.js to /src/components makes most sense and you won't have to do null-checking in this case

[jonthedev]

@pieh You was right, I did what you said and that solved my issue thanks very much!