Building fails because fetch is not defined

gatsby-config.js

require(`dotenv`).config();

module.exports = {
  siteMetadata: {
    author: `Thibault Maekelbergh`,
    keywords: `thibault maekelbergh, thibmaek, blog`,
    title: `A nice blog about development, Raspberry Pi, plants and probably records`,
    social: {
      github: `thibmaek`,
      twitter: `thibmaek`,
    },
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-contentful`,
      options: {
        accessToken: process.env.CONTENTFUL_TOKEN,
        spaceId: process.env.CONTENTFUL_SPACEID,
      },
    },
  ],
};

gatsby-node.js

const path = require(`path`);

const postTemplate = path.resolve(`./src/templates/post.jsx`);

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  return new Promise(async (resolve, reject) => {
    try {
      const posts = await graphql(`
        {
          allContentfulPost(limit: 1000) {
            edges {
              node {
                id
                slug
              }
            }
          }
        }
      `);

      if (posts.errors) reject(posts.errors);

      posts.data.allContentfulPost.edges.forEach(edge => {
        createPage({
          component: postTemplate,
          context: {
            id: edge.node.id,
            slug: edge.node.slug,
          },
          path: `/post/${edge.node.slug}/`,
        });
      });

      resolve();
    } catch (e) {
      console.error(e);
      reject(e);
    }
  });
};

Trying to run gatsby build fails because it can not find fetch:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  12 | 
  13 |   componentWillMount() {
> 14 |     fetch(process.env.GATSBY_RECENT_REPOS_URL)
     |     ^
  15 |       .then(r => r.json())
  16 |       .then(repos => {
  17 |         this.setState({ repos: repos.reverse() });


  WebpackError: fetch is not defined
  
  - index.jsx:14 RecentRepos.componentWillMount
    src/components/recent-repos/index.jsx:14:5
  
  - ReactCompositeComponent.js:348 ReactCompositeComponentWrapper.performInitialMount
    ~/react-dom/lib/ReactCompositeComponent.js:348:1
  
  - ReactCompositeComponent.js:255 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:255:1
  
  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

I tried polyfilling this with unfetch, node-fetch, isomorphic-fetch, whatwg-fetch and none of these worked. I think it might be an issue, if not where do I start to fix this?

[ciffelia]

If you don’t need polyfill for IE, you may use this code without isomorphic-fetch

typeof window !== 'undefined' && window.fetch(...)
  .then(...)
  .catch(...)

[KyleAMathews]

Try importing fetch instead of doing a polyfill.