gatsby: [v2] Development broken -> JSONStore error

Description

When running gatsby develop the processes finish successfully and open the dev server at localhost. But if I visit localhost I only see a blank page with the following error:

Uncaught Error: It appears like Gatsby is misconfigured. JSONStore is Gatsby internal development-only component and should never be used in production.

Unless your site has a complex or custom webpack/Gatsby configuration this is likely a bug in Gatsby. Please report this at https://github.com/gatsbyjs/gatsby/issues with steps to reproduce this error.

For some reason this evals to true in the dev server (that’s .cache/json-store.js):

if (process.env.NODE_ENV === `production`) {
  throw new Error(
    `It appears like Gatsby is misconfigured. JSONStore is Gatsby internal ` +
      `development-only component and should never be used in production.\n\n` +
      `Unless your site has a complex or custom webpack/Gatsby ` +
      `configuration this is likely a bug in Gatsby. ` +
      `Please report this at https://github.com/gatsbyjs/gatsby/issues ` +
      `with steps to reproduce this error.`
  )
}

Steps to reproduce

Sadly I can’t reproduce it or don’t know where it’s coming from. Two days before this error occurred the first time, then yesterday everything worked fine again. Today this error is breaking my development server again.

Environment

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Xeon(R) CPU E3-1230 v3 @ 3.30GHz
  Binaries:
    Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-image: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-catch-links: ^2.0.2-rc.0 => 2.0.2-rc.0
    gatsby-plugin-emotion: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-layout: ^1.0.0-rc.0 => 1.0.0-rc.0
    gatsby-plugin-lodash: ^3.0.1-rc.0 => 3.0.1-rc.0
    gatsby-plugin-manifest: ^2.0.2-rc.0 => 2.0.2-rc.0
    gatsby-plugin-netlify: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-netlify-cache: ^0.1.0 => 0.1.0
    gatsby-plugin-offline: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-react-helmet: ^3.0.0-rc.0 => 3.0.0-rc.0
    gatsby-plugin-sharp: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-sitemap: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-typography: ^2.2.0-rc.0 => 2.2.0-rc.0
    gatsby-remark-autolink-headers: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-remark-design-system: ^1.0.16 => 1.0.16
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-prismjs: ^3.0.0-rc.0 => 3.0.0-rc.0
    gatsby-remark-responsive-iframe: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-source-filesystem: ^2.0.1-rc.0 => 2.0.1-rc.0
    gatsby-transformer-remark: ^2.1.1-rc.0 => 2.1.1-rc.0
    gatsby-transformer-sharp: ^2.1.1-rc.0 => 2.1.1-rc.0

File contents (if changed)

gatsby-config.js:

const settings = require('./config/settings');

const pathPrefix = settings.pathPrefix === '/' ? '' : settings.pathPrefix;

module.exports = {
  siteMetadata: {
    siteUrl: settings.siteUrl + pathPrefix,
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-layout',
      options: {
        component: require.resolve(`./src/layouts/index.jsx`),
      },
    },
    {
      resolve: 'gatsby-plugin-emotion',
      options: {
        autoLabel: process.env.NODE_ENV !== 'production',
        labelFormat: '[filename]--[local]',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/docs`,
        name: 'docs',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/images/`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          // Plugins must be placed in this order to work correctly!
          {
            resolve: 'gatsby-remark-external-links',
            options: {
              target: '_blank',
              rel: 'nofollow noopener noreferrer',
            },
          },
          'gatsby-remark-design-system',
          {
            resolve: 'gatsby-remark-snippet',
            options: {
              directory: `${__dirname}/src/_examples/`,
            },
          },
          'gatsby-remark-prismjs',
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 122.5" width="33.25" height="14">
  <path data-name="Link" d="M246.5 0h-46A44.63 44.63 0 0 0 156 44.5v1h-21v-1A44.63 44.63 0 0 0 90.5 0h-46A44.63 44.63 0 0 0 0 44.5V78a44.64 44.64 0 0 0 44.5 44.5h46A44.64 44.64 0 0 0 135 78v-3.5h21V78a44.64 44.64 0 0 0 44.5 44.5h46A44.64 44.64 0 0 0 291 78V44.5A44.63 44.63 0 0 0 246.5 0zM106.67 77.83A13.71 13.71 0 0 1 93 91.5H44a13.71 13.71 0 0 1-13.67-13.67v-35A13.71 13.71 0 0 1 44 29.17h49a13.71 13.71 0 0 1 13.67 13.66v2.67H94a12 12 0 0 0-12 12v5a12 12 0 0 0 12 12h12.67zm154.83 0a13.71 13.71 0 0 1-13.67 13.67h-49a13.71 13.71 0 0 1-13.66-13.67V74.5H197a12 12 0 0 0 12-12v-5a12 12 0 0 0-12-12h-11.83v-2.67a13.7 13.7 0 0 1 13.66-13.66h49a13.71 13.71 0 0 1 13.67 13.66z"/>
</svg>`,
            },
          },
          'gatsby-remark-responsive-iframe',
        ],
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'src/utilities/typography.jsx',
      },
    },
    'gatsby-plugin-catch-links',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: settings.siteTitle,
        short_name: settings.siteShortname,
        description: settings.siteDescription,
        start_url: settings.pathPrefix,
        background_color: settings.backgroundColor,
        theme_color: settings.themeColor,
        display: 'fullscreen',
        icons: [
          {
            src: '/favicons/android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/favicons/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    },
    // Must be placed at the end of the file in this order!
    'gatsby-plugin-offline',
    'gatsby-plugin-netlify',
    'gatsby-plugin-netlify-cache',
  ],
};

gatsby-node.js:

const path = require('path');
const { createFilePath } = require('gatsby-source-filesystem');
const { toTitleCase, getLastUpdatedTimestamp } = require('./src/utilities');

const getSlugParents = slug => {
  const slugParentString = slug.substring(1, slug.length - 1);
  return slugParentString.split('/');
};

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;

  if (node.internal.type === 'MarkdownRemark') {
    const slug = createFilePath({ node, getNode, basePath: 'pages' });
    const slugParentsArr = getSlugParents(slug);

    createNodeField({
      node,
      name: 'slug',
      value: slug,
    });

    createNodeField({
      node,
      name: 'topLevelDir',
      value: toTitleCase(slugParentsArr[0]),
    });

    createNodeField({
      node,
      name: 'subDir',
      value: toTitleCase(slugParentsArr.length > 2 ? slugParentsArr[1] : ''),
    });
  }
};

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

  return new Promise((resolve, reject) => {
    const docPage = path.resolve('src/templates/doc.jsx');
    resolve(
      graphql(`
        {
          docs: allMarkdownRemark {
            edges {
              node {
                fileAbsolutePath
                fields {
                  slug
                  topLevelDir
                  subDir
                }
                frontmatter {
                  title
                }
              }
            }
          }
        }
      `).then(result => {
        if (result.errors) {
          console.log(result.errors);
          reject(result.errors);
        }

        const docsList = result.data.docs.edges;

        docsList.forEach(project => {
          createPage({
            path: project.node.fields.slug,
            component: docPage,
            context: {
              slug: project.node.fields.slug,
              topLevelDir: project.node.fields.topLevelDir,
              subDir: project.node.fields.subDir,
              lastUpdated: getLastUpdatedTimestamp(project.node.fileAbsolutePath),
            },
          });
        });
      })
    );
  });
};

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    node: { fs: 'empty', child_process: 'empty' },
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
  });
};