Gatsby: [v2] Development broken -> JSONStore error

[LekoArts]

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'],
    },
  });
};

[LekoArts]

After deleting my node_modules folder the dev server works again. I'm using yarn and often use upgrade-interactive. I'll try to see when it breaks.

[LekoArts]

After a restart of the computer it broke again. Deleting node_modules (but not yarn.lock) didn't help this time.

After removing yarn.lock and node_modules it works again. Let's see if it's working tomorrow after a restart...

[LekoArts]

Nope. After the restart it broke again. This time the deletion also didn't help.

At this point I'm clueless.

[KyleAMathews]

Just to clarify @LeKoArts, this just happens in an existing site? Not a new site from a starter, etc.?

[pieh]

I should've updated this issue - this happen with one specifc site that @LeKoArts can't share code for. So when he encounter this issue again we will try to coordinate and remote debug it. It shouldn't be a blocker for v2 release, as this is only instance of this as far as I am aware.

[manuelbieh]

Having the same issue "all of a sudden" after not having worked on that site for over a week. Not sure if I upgraded anything in the meantime but I'm pretty sure the last time I ran yarn develop everything worked fine.

Reproducible:

git clone https://github.com/manuelbieh/manuelbieh.de/tree/relaunch-v3
cd manuelbieh.de
git checkout -b relaunch-v3
yarn
yarn develop

Using Windows 10 and Node 8.11.3

// edit: ok, wow. I - for some weird reason - had NODE_ENV set to production. Setting it back to development makes the error magically disappear.

[LekoArts]

Yeah, because it checks for production internally (@pieh knows which file, I can't remember). It randomly occurs though. When using Webstorm instead of Git Bash it didn't happen until now.

[jonearley]

I also had this issue and resolved it by setting NODE_ENV to development.

[pieh]

I think it might come from here https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-cli/src/create-cli.js#L126 - we should just set it directly to development for gatsby develop instead of checking if NODE_ENV is already set - right now we really rely on this not being production for development (this will only affect gatsby process)

[marijan111]

After a restart of the computer it broke again. Deleting node_modules (but not yarn.lock) didn't help this time.

After removing yarn.lock and node_modules it works again. Let's see if it's working tomorrow after a restart...

I've just deleted node_modules and it worked, tried restarting my computer it seems like problem is solved with reinstalling node_modules

Also I would like to know why this happens?

[marijan111]

It just broke again, but this time reinstalling node_modules did not help.

[pieh]

@Marijan111 can you try running this: NODE_ENV=development gatsby develop and see if this fixes the issue?

[marijan111]

@Marijan111 can you try running this: NODE_ENV=development gatsby develop and see if this fixes the issue?

It just gives me an error 'NODE_ENV=development : The term 'NODE_ENV=development' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was
included, verify that the path is correct and try again.'

But I found this in render-page.js.map in public folder: '(process.env.NODE_ENV !== 'production')'
when I change NODE_ENV to development and run gatsby develop it just goes back to NODE_ENV

[yeskunall]

@Marijan111 oh, that’s because you’re using Windows. In that case, first install dotenv, add require('dotenv').config(), then do as @pieh suggested!

[marijan111]

@Marijan111 oh, that’s because you’re using Windows. In that case, first install dotenv, add require('dotenv').config(), then do as @pieh suggested!

Okay, I've installed [dotenv] and it's working now. Could you please explain to me why this happens, I'm new to Gatsby. Thank you!

[wardpeet]

@Marijan111 In gatsby we check for the global NODE_ENV variable to change our process. When running gatsby develop we check if it's set. In our code we set check process.env.NODE_ENV !== 'production'. Some tools or processes might set the global NODE_ENV to "production". Like @pieh suggested we should not look at NODE_ENV when running gatsby develop.

you can test if this is the case by running
powershell: echo $env:NODE_ENV
cmd: echo %NODE_EN%"

They probably return a value so using an .env work because require('dotenv').config() actually sets these environments variables before running your code so it can negates the global variables that were set on windows.

Does that make sense?

[marijan111]

@wardpeet Yes, totally makes sense. Thank you!

[gatsbot[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!

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

[LekoArts]

Not stale

[ianmah]

I've just run into the same issue after running
npx gatsby new gatsby-site
cd gatsby-site
npm run develop
without changing anything

[gatsbot[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.

Thanks again for being part of the Gatsby community!

[murilopolese]

Hello bot, I think you wrongly closed this issua, I'm still having this problem on a Ubuntu machine.
I run:

$ export NODE_ENV=development
$ echo $NODE_ENV
development
npm run develop

And my build still throws a Error: It appears like Gatsby is misconfigured. JSONStore is Gatsby internal development-only component and should never be used in production..

I have also tried to run it with NODE_ENV npm run development but it didn't work either.

If I run NODE_ENV=development ./node_modules/.bin/gatsby develop instead, then it builds correctly. I feel if this is fixed maybe you should mention here what version fix it, but as it is I think this is still an open issue, or?

[ivanjeremic]

Same issue fix it please

[Acidic9]

Also just received this error on an existing site.