`gatsby develop` script won't start my dev server - GraphQL error

[donghhan]

I followed exactly same as what it showed on the README.md in this repository, but I found error. Could anybody help?

warn The following flag(s) found in your gatsby-config.js are not known:
- FUNCTIONS
info Some features you configured with flags are used natively now.
Those flags no longer have any effect and you can remove them from config:
- PRESERVE_WEBPACK_CACHE · (Umbrella Issue (https://gatsby.dev/cache-clearing-feedback)) · Use webpack's persistent caching and don't delete webpack's cache when changing gatsby-node.js & gatsby-config.js files.

warn Plugin gatsby-plugin-remove-trailing-slashes is not compatible with your gatsby version 4.0.0 - It requires gatsby@^3.0.0-next.0
warn Plugin gatsby-plugin-remove-trailing-slashes is not compatible with your gatsby version 4.0.0 - It requires gatsby@^3.0.0-next.0
success open and validate gatsby-configs, load plugins - 0.555s
success onPreInit - 0.004s
success initialize cache - 0.080s
success copy gatsby files - 0.074s
success Compiling Gatsby Functions - 0.185s
success onPreBootstrap - 0.198s

 ERROR #11321  PLUGIN

"gatsby-plugin-mdx" threw an error while running the createSchemaCustomization lifecycle:

Cannot read properties of undefined (reading 'setParserPlugins')

  TypeError: Cannot read properties of undefined (reading 'setParserPlugins')

  - create-schema-customization.js:79 Object.createSchemaCustomization
    [gatsby-gitbook-starter]/[gatsby-plugin-mdx]/gatsby/create-schema-customization.js:79:37

  - api-runner-node.js:430 runAPI
    [gatsby-gitbook-starter]/[gatsby]/src/utils/api-runner-node.js:430:22

  - api-runner-node.js:581 Promise.catch.decorateEvent.pluginName
    [gatsby-gitbook-starter]/[gatsby]/src/utils/api-runner-node.js:581:13

  - debuggability.js:384 Promise._execute
    [gatsby-gitbook-starter]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [gatsby-gitbook-starter]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [gatsby-gitbook-starter]/[bluebird]/js/release/promise.js:103:10

  - api-runner-node.js:579 
    [gatsby-gitbook-starter]/[gatsby]/src/utils/api-runner-node.js:579:16

  - util.js:16 tryCatcher
    [gatsby-gitbook-starter]/[bluebird]/js/release/util.js:16:23

  - reduce.js:166 Object.gotValue
    [gatsby-gitbook-starter]/[bluebird]/js/release/reduce.js:166:18

  - reduce.js:155 Object.gotAccum
    [gatsby-gitbook-starter]/[bluebird]/js/release/reduce.js:155:25

  - util.js:16 Object.tryCatcher
    [gatsby-gitbook-starter]/[bluebird]/js/release/util.js:16:23

  - promise.js:547 Promise._settlePromiseFromHandler
    [gatsby-gitbook-starter]/[bluebird]/js/release/promise.js:547:31

  - promise.js:604 Promise._settlePromise
    [gatsby-gitbook-starter]/[bluebird]/js/release/promise.js:604:18

  - promise.js:641 Promise._settlePromiseCtx
    [gatsby-gitbook-starter]/[bluebird]/js/release/promise.js:641:10

  - async.js:97 _drainQueueStep
    [gatsby-gitbook-starter]/[bluebird]/js/release/async.js:97:12

  - async.js:86 _drainQueue
    [gatsby-gitbook-starter]/[bluebird]/js/release/async.js:86:9

success createSchemaCustomization - 0.090s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.711s
success building schema - 0.369s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "tableOfContents" on type "Mdx".

If you don't expect "tableOfContents" to exist on the type "Mdx" it is most likely a typo.
However, if you expect "tableOfContents" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "tableOfContents" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Mdx":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: gatsby-node.js:12:10

[
  GraphQLError [Object]: Cannot query field "tableOfContents" on type "Mdx".
      at Object.Field (/Users/alex/dev/gatsby-gitbook-starter/node_modules/graphql/validation/rules/FieldsOnCorrectTypeRule.js:48:31)
      at Object.enter (/Users/alex/dev/gatsby-gitbook-starter/node_modules/graphql/language/visitor.js:323:29)
      at Object.enter (/Users/alex/dev/gatsby-gitbook-starter/node_modules/graphql/utilities/TypeInfo.js:370:25)
      at visit (/Users/alex/dev/gatsby-gitbook-starter/node_modules/graphql/language/visitor.js:243:26)
      at validate (/Users/alex/dev/gatsby-gitbook-starter/node_modules/graphql/validation/validate.js:69:24)
      at GraphQLRunner.validate (/Users/alex/dev/gatsby-gitbook-starter/node_modules/gatsby/src/query/graphql-runner.ts:105:16)
      at GraphQLRunner.query (/Users/alex/dev/gatsby-gitbook-starter/node_modules/gatsby/src/query/graphql-runner.ts:174:39)
      at apply (/Users/alex/dev/gatsby-gitbook-starter/node_modules/gatsby/src/bootstrap/create-graphql-runner.ts:57:8)
      at wrappedGraphQL (/Users/alex/dev/gatsby-gitbook-starter/node_modules/gatsby/src/services/create-pages.ts:34:47)
      at /Users/alex/dev/gatsby-gitbook-starter/gatsby-node.js:14:7
      at new Promise (<anonymous>)
      at Object.exports.createPages (/Users/alex/dev/gatsby-gitbook-starter/gatsby-node.js:12:10)
      at runAPI (/Users/alex/dev/gatsby-gitbook-starter/node_modules/gatsby/src/utils/api-runner-node.js:430:22)
      at Promise.catch.decorateEvent.pluginName (/Users/alex/dev/gatsby-gitbook-starter/node_modules/gatsby/src/utils/api-runner-node.js:581:13)
      at Promise._execute (/Users/alex/dev/gatsby-gitbook-starter/node_modules/bluebird/js/release/debuggability.js:384:9)
      at Promise._resolveFromExecutor (/Users/alex/dev/gatsby-gitbook-starter/node_modules/bluebird/js/release/promise.js:518:18) {
    locations: [ [Object] ]
  }
]

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Cannot read properties of undefined (reading 'allMdx')

  37 |
  38 |         // Create blog posts pages.
> 39 |         result.data.allMdx.edges.forEach(({ node }) => {
     |                     ^
  40 |           createPage({
  41 |             path: node.fields.slug ? node.fields.slug : '/',
  42 |             component: path.resolve('./src/templates/docs.js'),

File: gatsby-node.js:39:21

  TypeError: Cannot read properties of undefined (reading 'allMdx')

  - gatsby-node.js:39 
    /Users/alex/dev/gatsby-gitbook-starter/gatsby-node.js:39:21

  - api-runner-node.js:430 runAPI
    [gatsby-gitbook-starter]/[gatsby]/src/utils/api-runner-node.js:430:16

failed createPages - 0.110s
success createPagesStatefully - 0.104s
info Total nodes: 49, SitePage nodes: 1 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success write out redirect data - 0.002s
success onPostBootstrap - 0.005s
info bootstrap finished - 3.745s
success onPreExtractQueries - 0.001s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "tableOfContents" on type "Mdx".

If you don't expect "tableOfContents" to exist on the type "Mdx" it is most likely a typo.
However, if you expect "tableOfContents" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "tableOfContents" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Mdx":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/components/rightSidebar.js:18:15

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "body" on type "Mdx".

If you don't expect "body" to exist on the type "Mdx" it is most likely a typo.
However, if you expect "body" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "body" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Mdx":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/templates/docs.js:127:7

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "tableOfContents" on type "Mdx".

If you don't expect "tableOfContents" to exist on the type "Mdx" it is most likely a typo.
However, if you expect "tableOfContents" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "tableOfContents" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Mdx":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/templates/docs.js:128:7

failed extract queries from components - 0.374s
success write out requires - 0.004s
success run static queries - 0.015s - 2/2 129.78/s
warn Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating

 ERROR 

Module not found: Error: Can't resolve '../../public/page-data/sq/d/3706406642.json' in '/Users/alex/dev/gatsby-gitbook-starter/src/components'

  ModuleNotFoundError: Module not found: Error: Can't resolve '../../public/page-data/sq/d/3706406642.json' in '/Users/alex/dev/gatsby-gitbook-starter/src/components'

  - Compilation.js:2004 
    [gatsby-gitbook-starter]/[webpack]/lib/Compilation.js:2004:28

  - NormalModuleFactory.js:795 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:795:13

  - NormalModuleFactory.js:275 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:275:22

  - NormalModuleFactory.js:431 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:431:22

  - NormalModuleFactory.js:124 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:124:11

  - NormalModuleFactory.js:667 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:667:25

  - NormalModuleFactory.js:852 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:852:8

  - NormalModuleFactory.js:972 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:972:5

  - async.js:6883 
    [gatsby-gitbook-starter]/[neo-async]/async.js:6883:13

  - NormalModuleFactory.js:947 Array.<anonymous>
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:947:14

  - async.js:2517 arrayEachFunc
    [gatsby-gitbook-starter]/[neo-async]/async.js:2517:19

  - async.js:6858 Object.parallel
    [gatsby-gitbook-starter]/[neo-async]/async.js:6858:9

  - NormalModuleFactory.js:870 NormalModuleFactory._resolveResourceErrorHints
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:870:12

  - NormalModuleFactory.js:831 
    [gatsby-gitbook-starter]/[webpack]/lib/NormalModuleFactory.js:831:18

not finished Building development bundle - 0.963s

[Jindu0506]

Facing same issue. Can anyone please help.

[andrei-curta]

you will need to update the packages

1. install npm-check-updates npm install -g npm-check-updates
2. run the command to update the dependencies to the latest patch version npx ncu -u -t patch
3. run npm install

After this, running gatsby develop should work

[sebazelonka]

Any update on this?

[DraTeots]

Same problem.

npm --version 8.15.0

node --version v16.17.1

Linux 5.15.0-46-generic #49~20.04.1-Ubuntu SMP Thu Aug 4 19:15:44 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

[ajrequenez]

you will need to update the packages

1. install npm-check-updates npm install -g npm-check-updates
2. run the command to update the dependencies to the latest patch version npx ncu -u -t patch
3. run npm install

After this, running gatsby develop should work

ncu appears to be an out of date weather(?) package. I didnt have to install the npm-check-updates package globally, i just ran it with npx.

1. npx npm-check-updates -u -t patch
2. npm install
3. I then had an issue w/ the NODE_OPTIONS in the start script with the updated dependencies. So you can remove it from the start script or just run npx gatsby develop