Gatsby: Error while develop with v2 and typescript: Cannot use GraphQLObjectType "SitePageConnection"

[vinz243]

Summary

I am trying to setup gatsby + typescript with v2, but I get an error about the graphQL instances.

Relevant information

Error:

error UNHANDLED REJECTION

  Error: Cannot use GraphQLObjectType "SitePageConnection" from another module or realm.
  Ensure that there is only one instance of "graphql" in the node_modules
  directory. If different versions of "graphql" are the dependencies of other
  relied on modules, use "resolutions" to ensure only one version is installed.
  https://yarnpkg.com/en/docs/selective-version-resolutions
  Duplicate "graphql" modules cannot be used at the same time since different
  versions may have different capabilities and behavior. The data from one
  version used in the function from another could produce confusing and
  spurious results.

  - Array.forEach

  - Array.reduce

  - index.js:41
    [project]/[gatsby]/dist/schema/index.js:41:26

  - Generator.next

  - util.js:16 tryCatcher
    [lib]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  - async.js:138 _drainQueueStep
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:138:12

  - async.js:131 _drainQueue
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:131:9

  - async.js:147 Async._drainQueues
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:147:5

  - async.js:17 Immediate.Async.drainQueues
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:17:14

However there is clearly only one graphql package:

[email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
└── [email protected]

Environment (if relevant)

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Shell: 5.2 - /bin/zsh
  Binaries:
    Node: 8.7.0 - ~/.nvm/versions/node/v8.7.0/bin/node
    npm: 5.8.0 - ~/.nvm/versions/node/v8.7.0/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 58.0
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.0 => 2.0.0 
    gatsby-plugin-manifest: ^2.0.2 => 2.0.2 
    gatsby-plugin-offline: ^2.0.5 => 2.0.5 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-typescript: ^2.0.0 => 2.0.0 
    gatsby-plugin-typography: ^2.2.0 => 2.2.0 
  npmGlobalPackages:
    gatsby-cli: 2.4.0

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
    `gatsby-plugin-typescript`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-typescript": "^7.1.0",
    "@types/react-helmet": "^5.0.7",
    "gatsby": "^2.0.0",
    "gatsby-plugin-manifest": "^2.0.2",
    "gatsby-plugin-offline": "^2.0.5",
    "gatsby-plugin-react-helmet": "^3.0.0",
    "gatsby-plugin-typescript": "^2.0.0",
    "gatsby-plugin-typography": "^2.2.0",
    "graphql": "^0.13.2",
    "prettier": "^1.14.2",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-helmet": "^5.2.0",
    "react-typography": "^0.16.13",
    "typescript": "^3.0.3",
    "typography": "^0.16.17",
    "typography-theme-grand-view": "^0.15.10"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write '**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

[kakadiadarpan]

@vinz243 The error says this:

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.
https://yarnpkg.com/en/docs/selective-version-resolutions

If you check yarn.lock, there will be something like below there for graphql:

If you check the screenshot above, it mentions 2 version of graphql. The error says there should only be 1. To fix this, follw the steps below

1. In your package.json add the following:

resolutions: {
    "graphql": "version"
}

NOTE: Replace version with a specific version which works for you.

1. Run yarn

This should fix the error for you.

[vinz243]

Fixed thanks ! I wasn't using yarn but now I do :)

[pungggi]

By the way there is a npm package https://www.npmjs.com/package/npm-force-resolutions that does not force to use yarn for this.

[kingluddite]

"resolutions": {
"graphql": "version"
}

[SammyIsra]

Does this solution work with yarn alone? I use npm instead, but I'm receiving the same error with the solution listed.

[daniellizik]

I don't get this issue if I make a new project with gatsby cli. This only seems to happen for me if I need to migrate a project to gatsby (without cli) and just copy/paste lots of files.