Here's my hero.js a part code:
const ImageBackground = styled('div')`
background-image: url('/images/zhang-kaiyv-beijing.jpg');
background-position: top 20% center;
background-size: cover;
height: 50vh;

• • {
    margin-top: 0;
    }
    `;

...

const Hero = () => {
return (
// We don't do any sharp process for hero image yet

Frontend Masters + Gatsby ♥

Hello Bejing! Learn about me →

Then, I get it in index.js like this:
return (
<>

Read my blog

But, somehow, homePage can't get this image.

React-helmet v6.0.0 was just released 22 days ago and there is no longer a default export.

Now we should use import { Helmet } from "react-helmet" instead of import Helmet from "react-helmet".

I followed all the steps on the Rendering Site Metadata video and upon restarting the server, I was getting the following error:
warn "export 'default' (imported as 'Helmet') was not found in 'react-helmet'

After looking for a while into it, I found the solution was to put “Helmet” in curly brackets in the layouts.js file. Like so:

Before
import Helmet from "react-helmet";

After
import { Helmet } from "react-helmet";

After a bunch of issues with running the project in WSL1 & WSL2 (where hot reloading was not working or taking 5 mins per file change respectively, have determined the cause and a temporary fix in the depths of microsoft/WSL#4739 - basically no file change notifications are sent from Windows to Linux so you must initialise the project in the WSL file-system NOT windows file-system itself via "wsl:$~/home/user/project_name" hopefully this saves someone some time :) ) and getting the gatsby-intro project up and running I have run into another issue:

The introduction of the gatsby-emotion-plugin into my project throws a bunch of errors regarding the dependencies. Some are system specific, namely fsevents being unavailable for Windows or Ubuntu, but the list just goes on and and on when others are changed or updated, the others begin to throw errors.

Personally I'm not entirely sure how to fix this without spending a whole lot more time on this as I have already spent a couple of days working through this combination of issues and need to move on and will simply try out the gatsby docs starters under the guise they will be using a more up to date dependency tree.

Maybe there is an updated file tree with notes via github using another/updated css/jsx solution, or even an updated intro to gatsby course (although I realise this might be a little resource intensive).

Hi 👋

First of all, fantastic course! So far, I have been enjoying a lot. Kudos!

I have been following the course but got a little bit stuck in the following video:
https://frontendmasters.com/courses/gatsby/getting-post-data-by-slug/

Turns out that instead of

query($slug: String!) {
    mdx(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        title
        author
      }
      code {
        body
      }
    }
  }

I had to use:

query($slug: String!) {
    mdx(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        title
        author
      }
      body
    }
  }

Seems that there's no code under mdx().

If someone run into the same issue, please give it a try!

Cheers!

Hello 👋- I used a different image in my hero.js file than the one from the tutorial. Local develop and build runs fine, but deployment fails in Netlify with this sharp error.

10:02:01 AM: (sharp:1192): GLib-CRITICAL **: 14:02:01.583: g_hash_table_lookup: assertion 'hash_table != NULL' failed
10:02:01 AM: (sharp:1192): GLib-CRITICAL **: 14:02:01.583: g_hash_table_insert_internal: assertion 'hash_table != NULL' failed
10:02:01 AM: (sharp:1192): GLib-CRITICAL **: 14:02:01.583: g_hash_table_lookup: assertion 'hash_table != NULL' failed

I added my own photo to /images and updated the file path in hero.js, any idea why it fails in Netlify deploy? I can only get a successful build if I use nicole-harrington-mn.jpg

Hi!

I'm trying to deploy the project to Netlify as in the tutorial. However, I'm getting the following error message:
Error running command: Build script returned non-zero exit code: 139

Here's the complete Netlify log:
`8:23:06 PM: Build ready to start
8:23:09 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
8:23:09 PM: build-image tag: v3.3.2
8:23:09 PM: buildbot version: f71b4aa1b1ebc2bff806e48691024e0ab383dc02
8:23:09 PM: Fetching cached dependencies
8:23:09 PM: Starting to download cache of 255.0KB
8:23:09 PM: Finished downloading cache in 104.754792ms
8:23:09 PM: Starting to extract cache
8:23:09 PM: Failed to fetch cache, continuing with build
8:23:09 PM: Starting to prepare the repo for build
8:23:09 PM: No cached dependencies found. Cloning fresh repo
8:23:09 PM: git clone https://github.com/joerlop/gatsby-intro
8:23:11 PM: Preparing Git Reference refs/heads/master
8:23:11 PM: Starting build script
8:23:11 PM: Installing dependencies
8:23:13 PM: Downloading and installing node v10.16.3...
8:23:13 PM: Downloading https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz...
8:23:14 PM: 0.0%
8:23:14 PM:

8:23:14 PM: 8.1%
8:23:14 PM:
############
8:23:14 PM: 17.0%
8:23:15 PM:
#####################
8:23:15 PM: 29.2%
8:23:15 PM:
################################
8:23:15 PM: 45.7%
8:23:15 PM:
################################################
8:23:15 PM: ####### 76.8%
8:23:15 PM:
################################################################
8:23:15 PM: ######## 100.0%
8:23:15 PM: Computing checksum with sha256sum
8:23:15 PM: Checksums matched!
8:23:18 PM: Now using node v10.16.3 (npm v6.9.0)
8:23:18 PM: Attempting ruby version 2.6.2, read from environment
8:23:20 PM: Using ruby version 2.6.2
8:23:20 PM: Using PHP version 5.6
8:23:20 PM: Started restoring cached node modules
8:23:20 PM: Finished restoring cached node modules
8:23:21 PM: Installing NPM modules using NPM version 6.9.0
8:24:01 PM: > [email protected] install /opt/build/repo/node_modules/sharp
8:24:01 PM: > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
8:24:02 PM: info
8:24:02 PM: sharp
8:24:02 PM: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.8.1/libvips-8.8.1-linux-x64.tar.gz
8:24:04 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js
8:24:04 PM: > node scripts/postinstall || echo "ignore"
8:24:05 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
8:24:05 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
8:24:05 PM: > https://opencollective.com/core-js
8:24:05 PM: > https://www.patreon.com/zloirock
8:24:05 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
8:24:05 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js-pure
8:24:05 PM: > node scripts/postinstall || echo "ignore"
8:24:05 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
8:24:05 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
8:24:05 PM: > https://opencollective.com/core-js
8:24:05 PM: > https://www.patreon.com/zloirock
8:24:05 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
8:24:05 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby-telemetry
8:24:05 PM: > node src/postinstall.js
8:24:05 PM: > [email protected] postinstall /opt/build/repo/node_modules/cwebp-bin
8:24:05 PM: > node lib/install.js
8:24:06 PM: ✔ cwebp pre-build test passed successfully
8:24:06 PM: > [email protected] postinstall /opt/build/repo/node_modules/mozjpeg
8:24:06 PM: > node lib/install.js
8:24:07 PM: ✔ mozjpeg pre-build test passed successfully
8:24:07 PM: > [email protected] postinstall /opt/build/repo/node_modules/pngquant-bin
8:24:07 PM: > node lib/install.js
8:24:07 PM: ✔ pngquant pre-build test passed successfully
8:24:10 PM: npm WARN optional
8:24:10 PM: SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
8:24:10 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:24:10 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/gatsby-source-filesystem/node_modules/fsevents):
8:24:10 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:24:10 PM: added 2028 packages from 1062 contributors and audited 28017 packages in 47.706s
8:24:10 PM: found 807 vulnerabilities (806 high, 1 critical)
8:24:10 PM: run npm audit fix to fix them, or npm audit for details
8:24:11 PM: NPM modules installed
8:24:11 PM: Started restoring cached go cache
8:24:11 PM: Finished restoring cached go cache
8:24:11 PM: unset GOOS;
8:24:11 PM: unset GOARCH;
8:24:11 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
8:24:11 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
8:24:11 PM: go version >&2;
8:24:11 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
8:24:11 PM: go version go1.12 linux/amd64
8:24:11 PM: Installing missing commands
8:24:11 PM: Verify run directory
8:24:11 PM: Executing user command: gatsby build
8:24:14 PM: success open and validate gatsby-configs — 0.008 s
8:24:16 PM: success load plugins — 1.859 s
8:24:16 PM: success onPreInit — 0.006 s
8:24:16 PM: success delete html and css files from previous builds — 0.006 s
8:24:16 PM: success initialize cache — 0.007 s
8:24:16 PM: success copy gatsby files — 0.028 s
8:24:16 PM: success onPreBootstrap — 0.014 s
8:24:18 PM: success source and transform nodes — 2.093 s
8:24:18 PM: success building schema — 0.333 s
8:24:18 PM: success createPages — 0.038 s
8:24:18 PM: success createPagesStatefully — 0.089 s
8:24:18 PM: success onPreExtractQueries — 0.004 s
8:24:18 PM: success update schema — 0.035 s
8:24:18 PM: success extract queries from components — 0.153 s
8:24:18 PM: success write out requires — 0.005 s
8:24:18 PM: success write out redirect data — 0.001 s
8:24:18 PM: success onPostBootstrap — 0.001 s
8:24:18 PM: info bootstrap finished - 7.499 s
8:24:22 PM: success run static queries — 3.284 s — 4/4 1.22 queries/second
8:24:48 PM: success Building production JavaScript and CSS bundles — 26.319 s
8:24:49 PM: success Rewriting compilation hashes — 0.001 s
8:24:49 PM: success run page queries — 0.021 s — 5/5 255.21 queries/second
8:25:31 PM: success Building static HTML for pages — 5.288 s — 5/5 14.46 pages/second
8:25:31 PM: info Done building in 80.38 sec
8:25:33 PM: (sharp:1476): GLib-CRITICAL **: 01:25:33.723: g_hash_table_lookup: assertion 'hash_table != NULL' failed
8:25:33 PM: (sharp:1476): GLib-CRITICAL **: 01:25:33.723: g_hash_table_insert_internal: assertion 'hash_table != NULL' failed
8:25:33 PM: (sharp:1476): GLib-CRITICAL **: 01:25:33.723: g_hash_table_lookup: assertion 'hash_table != NULL' failed
8:25:36 PM: /usr/local/bin/build: line 60: 1476 Segmentation fault (core dumped) gatsby build
8:25:36 PM: Skipping functions preparation step: no functions directory set
8:25:36 PM: Caching artifacts
8:25:36 PM: Started saving node modules
8:25:36 PM: Finished saving node modules
8:25:36 PM: Started saving pip cache
8:25:36 PM: Finished saving pip cache
8:25:36 PM: Started saving emacs cask dependencies
8:25:36 PM: Finished saving emacs cask dependencies
8:25:36 PM: Started saving maven dependencies
8:25:36 PM: Finished saving maven dependencies
8:25:36 PM: Started saving boot dependencies
8:25:36 PM: Finished saving boot dependencies
8:25:36 PM: Started saving go dependencies
8:25:36 PM: Finished saving go dependencies
8:25:40 PM: Error running command: Build script returned non-zero exit code: 139
8:25:40 PM: Failing build: Failed to build site
8:25:40 PM: failed during stage 'building site': Build script returned non-zero exit code: 139
8:25:40 PM: Finished processing build request in 2m31.553944778s`

Using gatsby-mdx, gatsby was not picking up .mdx files added to the pages directory but it looks like you can just install gatsby-plugin-mdx and use that in gatsby-config.js with no other modifications.

Hello,

Instagram posts scraping using a username is not currently possible.


An Instagram username ID is needed instead.

More info here:
https://github.com/oorestisime/gatsby-source-instagram#public-scraping-for-posts
https://www.instagram.com/developer/

There is a known issue with gatsby-plugin-mdx and gatsby-remark-issue which results in double images with the config described in the course. This can be fixed by adding gatsby-remark-images as plugin of gatsby-plugin-mxd.

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve('./src/components/layout.js'),
        },
        gatsbyRemarkPlugins: ['gatsby-remark-images'],
        plugins: ['gatsby-remark-images'],
      },
    },

In the Blog Posts section of the Gatsby course during the first part, Rendering Components in MDX, after installing the mdx plugin, this error popped up and prevented me from restarting the development server.

Also, cleaned the cache and deleted/re-installed node_modules, but the error remained.