Gatsby develop command error

[MaralS]

Hi everyone,
I just created a new Gatsby project for a client.
I just ran these following commands
gatsby new mynewproject
cd mynewproject
gatsby develop

Until here, nothing wrong. But when i'm on localhost:8000 I have this error message :

TypeError: Cannot read property 'jsonName' of undefined

I tried several time to delete the folder and reinstall Gatsby but I can't fix this issue.

fireshot capture 3 - - http___localhost_8000_

What can I do in order to solve this issue ??

Thank in advance for your help.

Have a great day.

Maral

[rdela]

Hi @MaralS are you up to date? If not can you try with Gatsby 1.9.131
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/package.json#L4

and gatsby-cli 1.1.27
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-cli/package.json#L4

Run
npm install -g gatsby-cli (docs)
to update gatsby-cli only or
npm update -g (docs)
to update all global packages.

Or yarn upgrade (docs) / upgrade-interactive (docs) if you installed with Yarn

Then if it is still showing errors try manually updating Gatsby version in your package.json to ^1.9.131 (current) like ^1.9.128 example here gatsbyjs/gatsby-starter-blog@7fffe70#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R10

Think when this is merged this should go away
gatsbyjs/gatsby-starter-blog#78

[rdela]

@MaralS you will also need to npm i or yarn, whichever you prefer, again after this step:

Then if it is still showing errors try manually updating Gatsby version in your package.json to ^1.9.131 (current) like ^1.9.128 example here gatsbyjs/gatsby-starter-blog@7fffe70#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R10

[MaralS]

I'm using Yarn now, and everything work. Thanks 👍

[AtHeartEngineer]

This is still broken for me. I'd prefer not to use yarn. Following the get started instructions doesn't work. (https://www.gatsbyjs.org/docs/)

success delete html files from previous builds — 0.007 s
success open and validate gatsby-config.js — 0.004 s
success copy gatsby files — 0.018 s
success onPreBootstrap — 0.004 s
success source and transform nodes — 0.015 s
success building schema — 0.095 s
success createLayouts — 0.599 s
success createPages — 0.331 s
success createPagesStatefully — 1.465 s
success onPreExtractQueries — 0.001 s
success update schema — 0.045 s
success extract queries from components — 0.195 s
success run graphql queries — 0.028 s
error UNHANDLED REJECTION

  TypeError: Cannot read property 'jsonName' of undefined
  - pages-writer.js:79
    [progressfm]/[gatsby]/dist/internal-plugins/query-runner/pages-writer.js:
    79:36

  - Array.forEach

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9

[MaralS]

@AtHeartEngineer is faster than npm, you should at least try :)

[reramjiawan]

This problem still persists today following the exact steps as listed on the Gatsby website, tried both NPM and Yarn.

[error] UNHANDLED REJECTION

  TypeError: Cannot read property 'jsonName' of undefined

  - pages-writer.js:79
    [gatsby-site]/[gatsby]/dist/internal-plugins/query-runner/pages-writer.js:79:36

  - Array.forEach

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9`

[szimek]

@reramjiawan What version of node, yarn and gatsby are you using? What OS? Could you also paste the whole output of gatsby new ... command?

[reramjiawan]

OS: Windows 10 64-bit
Node: 8.9.4
Yarn: 1.3.2
Gatsby: 1.9.157

Followed the exact steps on the Gatsby website, installed the Gatsby CLI and then ran the commands as shown.

Your environment has been set up for using Node.js 8.9.4 (x64) and npm.

C:\Users\Ravindre>cd C:\Program Files (x86)\Ampps\www

C:\Program Files (x86)\Ampps\www>gatsby new gatsby-site
info Creating new site from git: git://github.com/gatsbyjs/gatsby-starter-default.git
Cloning into 'gatsby-site'...
remote: Counting objects: 700, done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 700 (delta 7), reused 16 (delta 4), pack-reused 679
Receiving objects: 100% (700/700), 661.25 KiB | 1.00 MiB/s, done.
Resolving deltas: 100% (403/403), done.
success Created starter directory layout
info Installing packages...
yarn install v1.3.2
info No lockfile found.
[1/4] Resolving packages...
warning gatsby > babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "win32" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "gatsby > postcss-cssnext@2.11.0" has unmet peer dependency "caniuse-db@^1.0.30000652".
warning " > react-helmet@5.2.0" has unmet peer dependency "react@>=15.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 15.99s.

C:\Program Files (x86)\Ampps\www>cd C:\Program Files (x86)\Ampps\www\gatsby-site

C:\Program Files (x86)\Ampps\www\gatsby-site>gatsby develop
success delete html files from previous builds — 0.007 s
success open and validate gatsby-config.js — 0.005 s
success copy gatsby files — 0.025 s
success onPreBootstrap — 0.005 s
success source and transform nodes — 0.022 s
success building schema — 0.093 s
success createLayouts — 4.484 s
success createPages — 3.173 s
success createPagesStatefully — 6.130 s
success onPreExtractQueries — 0.001 s
success update schema — 0.055 s
success extract queries from components — 0.438 s
success run graphql queries — 0.637 s
error UNHANDLED REJECTION

  TypeError: Cannot read property 'jsonName' of undefined

  - pages-writer.js:79
    [gatsby-site]/[gatsby]/dist/internal-plugins/query-runner/pages-writer.js:79:36

  - Array.forEach

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9

[szimek]

Does anyone have this error on OS other than Windows?

[reramjiawan]

With some help of @KyleAMathews on Discord we tracked the problem down to being to the glob failing, which means the layout object isn't created.

C:\Program Files (x86)\Ampps\www\gatsby-site>gatsby develop
success delete html files from previous builds — 0.008 s
success open and validate gatsby-config.js — 0.005 s
success copy gatsby files — 0.026 s
success onPreBootstrap — 0.005 s
success source and transform nodes — 0.017 s
success building schema — 0.097 s
⠁ C:/Program Files (x86)/Ampps/www/gatsby-site/src/layouts/**/?.(js,jsx)
[]
success createLayouts — 0.678 s
success createPages — 0.009 s
success createPagesStatefully — 2.511 s
success onPreExtractQueries — 0.002 s
success update schema — 0.046 s
success extract queries from components — 0.094 s
success run graphql queries — 0.109 s
⠁ { layout: 'index',
  jsonName: 'dev-404-page.json',
  internalComponentName: 'ComponentDev404Page',
  path: '/dev-404-page/',
  matchPath: undefined,
  component: 'C:/Program Files (x86)/Ampps/www/gatsby-site/.cache/dev-404-page.js',
  componentChunkName: 'component---cache-dev-404-page-js',
  context: {},
  updatedAt: 1516211479261,
  pluginCreator___NODE: 'Plugin dev-404-page',
  pluginCreatorId: 'Plugin dev-404-page',
  componentPath: 'C:/Program Files (x86)/Ampps/www/gatsby-site/.cache/dev-404-page.js' } []
error UNHANDLED REJECTION

  TypeError: Cannot read property 'jsonName' of undefined

  - pages-writer.js:80
    [gatsby-site]/[gatsby]/dist/internal-plugins/query-runner/pages-writer.js:80:36

  - Array.forEach

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9

[reramjiawan]

The problem is solved! It is related to being a permission issue on Windows Machines. Installing Gatsby on a other drive or folder which does not need permission so NOT Program Files will solve the problem!

[szimek]

@reramjiawan Looks like node-glob package has some strange issues on Windows, e.g. isaacs/node-glob#245 :/

[KyleAMathews]

@szimek hmm that could be it

Both node-glob and chokidar are failing to find the layout component file

gatsby/packages/gatsby/src/internal-plugins/component-layout-creator/gatsby-node.js

Line 29 in 0a1e42c

let files = await glob(`${layoutDirectory}/**/?(${exts})`)

[szimek]

While it sucks a bit, if it's really caused by this permissions issue, maybe Gatsby could check file permissions when creating a new app and report an error/warning if they are incorrect (whatever it actually means) and could break node-glob?

[justinfrench]

@szimek I've just experienced this same issue on macOS, so it doesn't seem to be limited to Windows. Is there a particular file or directory that needs a specific set of permissions to work-around this?