Gatsby-transformer-sharp broke after migrating to v4

[ar0ra1]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

1. Updated Gatsby and Gatsby-cli for v4
2. Updated all packages to latest
3. When running gatsby develop the following errors comes:

success open and validate gatsby-configs, load plugins - 1.662s
success onPreInit - 0.016s
success initialize cache - 0.182s
success copy gatsby files - 0.134s
success Compiling Gatsby Functions - 0.459s
success onPreBootstrap - 1.030s

 ERROR #11321  PLUGIN

"gatsby-transformer-sharp" threw an error while running the createSchemaCustomization lifecycle:

Cannot use GraphQLScalarType "{ name: "JSON", description: "The `JSON` scalar type represents JSON values as specified by
[ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).", specifiedByURL: undefined, serialize: [function identity], parseValue:
[function identity], parseLiteral: [function parseLiteral], extensions: {}, astNode: undefined, extensionASTNodes: [] }" 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.



  Error: Cannot use GraphQLScalarType "{ name: "JSON", description: "The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-internati
  onal.org/publications/files/ECMA-ST/ECMA-404.pdf).", specifiedByURL: undefined, serialize: [function identity], parseValue: [function identity], parseLiteral: [funct
  ion parseLiteral], extensions: {}, astNode: undefined, extensionASTNodes: [] }" 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.

  - customize-schema.js:485 imageNodeType
    [net-glow]/[gatsby-transformer-sharp]/customize-schema.js:485:11

  - customize-schema.js:644 createFields
    [net-glow]/[gatsby-transformer-sharp]/customize-schema.js:644:21

  - customize-schema.js:842 Object.module.exports [as createSchemaCustomization]
    [net-glow]/[gatsby-transformer-sharp]/customize-schema.js:842:13

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

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

  - debuggability.js:384 Promise._execute
    [net-glow]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [net-glow]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [net-glow]/[bluebird]/js/release/promise.js:103:10

  - api-runner-node.js:579
    [net-glow]/[gatsby]/src/utils/api-runner-node.js:579:16

  - util.js:16 tryCatcher
    [net-glow]/[bluebird]/js/release/util.js:16:23

Reproduction Link

Cannot because of NDA

Steps to Reproduce

As mentioned in description

Expected Result

Development mode

Actual Result

Stuck on building schemas

Environment

System:
    OS: macOS 12.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.2.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 8.1.4 - /usr/local/bin/npm
  Languages:
    Python: 3.8.0 - /usr/local/bin/python
  Browsers:
    Chrome: 96.0.4664.55
    Edge: 95.0.1020.40
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    gatsby: ^4.3.0 => 4.3.0
    gatsby-cli: ^4.3.0 => 4.3.0
    gatsby-image: ^3.11.0 => 3.11.0
    gatsby-plugin-canonical-urls: ^4.3.0 => 4.3.0
    gatsby-plugin-fullstory: ^4.3.0 => 4.3.0
    gatsby-plugin-google-analytics: ^4.3.0 => 4.3.0
    gatsby-plugin-google-tagmanager: ^4.3.0 => 4.3.0
    gatsby-plugin-htaccess: ^1.4.0 => 1.4.0
    gatsby-plugin-image: ^2.3.0 => 2.3.0
    gatsby-plugin-manifest: ^4.3.0 => 4.3.0
    gatsby-plugin-offline: ^5.3.0 => 5.3.0
    gatsby-plugin-optimize-svgs: ^1.0.5 => 1.0.5
    gatsby-plugin-react-helmet: ^5.3.0 => 5.3.0
    gatsby-plugin-robots-txt: ^1.6.14 => 1.6.14
    gatsby-plugin-sharp: ^4.3.0 => 4.3.0
    gatsby-plugin-sitemap: ^5.3.0 => 5.3.0
    gatsby-plugin-tawk: ^1.0.0 => 1.0.0
    gatsby-plugin-transition-link: ^1.20.5 => 1.20.5
    gatsby-plugin-webfonts: ^2.2.1 => 2.2.1
    gatsby-source-filesystem: ^4.3.0 => 4.3.0
    gatsby-transformer-sharp: ^4.3.0 => 4.3.0
  npmGlobalPackages:
    gatsby-cli: 4.3.0

### Config Flags

_No response_

[LekoArts]

Hi!

As the error suggests you might have duplicate/multiple versions of graphql installed. We have not seen any issues with gatsby-transformer-sharp since the update (particularly not the one you posted) so this must be isolated to your environment. You can run yarn why graphql to see if you have multiple versions.

Nuking node_modules and any lock file might also help afterwards.

[ar0ra1]

I use npm to install and not yarn

But anyways, I tried yarn remove graphql

yarn remove v1.16.0
warning package.json: "dependencies" has dependency "webpack" with range "^5.24.2" that collides with a dependency in "devDependencies" of the same name with version "^5.47.1"
error No lockfile in this directory. Run `yarn install` to generate one.
info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.

For NPM:

I removed node_modules folder
and did npm install
for conflicts, I installed : npm install -g npm-check-updates
then ncu -u
then npm install