Gatsby: Error: Cannot create as TypeComposer the following value: ImageFormat.

[Mrazator]

Description

When linking gatsby-theme with yarn link to the gatsby site using that theme, gatsby build fails with the following error:

$ gatsby build --prefix-paths
success open and validate gatsby-configs - 0.093s
success load plugins - 4.355s
success onPreInit - 0.016s
success delete html and css files from previous builds - 0.013s
success initialize cache - 0.013s
success copy gatsby files - 0.167s
success onPreBootstrap - 0.019s
success createSchemaCustomization - 0.011s
success source and transform nodes - 1.489s
error Cannot create as TypeComposer the following value: ImageFormat.


  Error: Cannot create as TypeComposer the following value: ImageFormat.

  - SchemaComposer.js:365 SchemaComposer.createTempTC
    [docs]/[graphql-compose]/lib/SchemaComposer.js:365:11

  - SchemaComposer.js:563 SchemaComposer.addAsComposer
    [docs]/[graphql-compose]/lib/SchemaComposer.js:563:27

  - schema.js:467 processAddedType
    [docs]/[gatsby]/dist/schema/schema.js:467:35

  - schema.js:392
    [docs]/[gatsby]/dist/schema/schema.js:392:9

  - Array.forEach

  - schema.js:310 addTypes
    [docs]/[gatsby]/dist/schema/schema.js:310:9

  - schema.js:173 updateSchemaComposer
    [docs]/[gatsby]/dist/schema/schema.js:173:9

  - schema.js:99 buildSchema
    [docs]/[gatsby]/dist/schema/schema.js:99:9

  - index.js:141 build
    [docs]/[gatsby]/dist/schema/index.js:141:24

  - build-schema.js:20 async buildSchema
    [docs]/[gatsby]/dist/services/build-schema.js:20:3

  - index.js:34 async bootstrap
    [docs]/[gatsby]/dist/bootstrap/index.js:34:3

  - build.js:96 async build
    [docs]/[gatsby]/dist/commands/build.js:96:7


not finished building schema - 0.112s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Steps to reproduce

1. Run yarn link on any gatsby-theme-[name]
2. Run yarn link gatsby-theme-[name] in the site using that theme and install dependencies with yarn
3. Run gatsby build and the error should appear

Expected result

gatsby build succeeds

Actual result

When the gatsby-theme package is linked with yarn link, the build fails with the error above. However, when the the same gatsby-theme package is downloaded straight from npm registry, the build succeeds.

Environment

  System:
    OS: Linux 4.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 13.12.0 - /usr/bin/node
    Yarn: 1.22.4 - /mnt/c/Users/MarcelM/AppData/Roaming/npm/yarn
    npm: 6.14.4 - /usr/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  npmPackages:
    gatsby: ^2.23.18 => 2.23.22

[Mrazator]

I tried to use workspaces instead, by adding path to my theme into my-gatsby-site > package.json > workspaces: [ "../../my-gatsby-theme" ].

Now gatsby build fails on resolving the first plugin in my-gatsby-theme > gatsby-config.js > plugins field, even though the plugin is properly installed and located in one of the searched locations: - /home/marcelm/projects/my-mono-repo/my-gatsby-site/node_modules/gatsby-plugin-workerize-loader:

error Couldn't find the "gatsby-plugin-workerize-loader" plugin declared in "/home/marcelm/projects/my-gatsby-theme/gatsby-config.js".

Tried looking for an installed package in the following paths:
 - /home/marcelm/projects/my-mono-repo/my-gatsby-site/node_modules/gatsby/dist/bootstrap/load-themes/node_modules/gatsby-plugin-workerize-loader
 - /home/marcelm/projects/my-mono-repo/my-gatsby-site/node_modules/gatsby/dist/bootstrap/node_modules/gatsby-plugin-workerize-loader
 - /home/marcelm/projects/my-mono-repo/my-gatsby-site/node_modules/gatsby/dist/node_modules/gatsby-plugin-workerize-loader
 - /home/marcelm/projects/my-mono-repo/my-gatsby-site/node_modules/gatsby/node_modules/gatsby-plugin-workerize-loader
 - /home/marcelm/projects/my-mono-repo/my-gatsby-site/node_modules/gatsby-plugin-workerize-loader
 - /home/marcelm/projects/my-mono-repo/my-gatsby-site/gatsby-plugin-workerize-loader
 - /home/marcelm/projects/node_modules/gatsby-plugin-workerize-loader
 - /home/marcelm/node_modules/gatsby-plugin-workerize-loader
 - /home/node_modules/gatsby-plugin-workerize-loader
 - /node_modules/gatsby-plugin-workerize-loader
not finished open and validate gatsby-configs - 0.061s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[Mrazator]

Finally setting workspaces next to each other helped to resolve the issue (same structure as: https://github.com/gatsbyjs/gatsby-starter-theme-workspace) - at least as a workaround.

However, I still do not understand why the previous attempt with workspaces did not work as dependencies seems to be installed correctly. Is it maybe some limitation of yarn itself?

[pieh]

Looking at the code from the stack trace ( https://unpkg.com/browse/[email protected]/lib/SchemaComposer.js ):

  createTempTC(typeOrSDL) {
    let type;

    if (typeof typeOrSDL === 'string') {
      type = this.typeMapper.createType(typeOrSDL);
    } else {
      type = typeOrSDL;
    }

    if (type instanceof _ObjectTypeComposer.ObjectTypeComposer || type instanceof _InputTypeComposer.InputTypeComposer || type instanceof _ScalarTypeComposer.ScalarTypeComposer || type instanceof _EnumTypeComposer.EnumTypeComposer || type instanceof _InterfaceTypeComposer.InterfaceTypeComposer || type instanceof _UnionTypeComposer.UnionTypeComposer) {
      return type;
    } else if (type instanceof _graphql.GraphQLObjectType) {
      return _ObjectTypeComposer.ObjectTypeComposer.createTemp(type, this);
    } else if (type instanceof _graphql.GraphQLInputObjectType) {
      return _InputTypeComposer.InputTypeComposer.createTemp(type, this);
    } else if (type instanceof _graphql.GraphQLScalarType) {
      return _ScalarTypeComposer.ScalarTypeComposer.createTemp(type, this);
    } else if (type instanceof _graphql.GraphQLEnumType) {
      return _EnumTypeComposer.EnumTypeComposer.createTemp(type, this);
    } else if (type instanceof _graphql.GraphQLInterfaceType) {
      return _InterfaceTypeComposer.InterfaceTypeComposer.createTemp(type, this);
    } else if (type instanceof _graphql.GraphQLUnionType) {
      return _UnionTypeComposer.UnionTypeComposer.createTemp(type, this);
    }

    throw new Error(`Cannot create as TypeComposer the following value: ${(0, _misc.inspect)(type)}.`);
  }

What comes to mind is the instanceof checks not ever matching probably means that there is multiple instances of graphql module (one in dir you link and one in your actual site). This is known to cause various issues in graphql ecosystem.

The second approach seems weird, but it can happen if you don't have index.js / main entry in package.json file that points to existing file, but confusing part here is that 3rd approach worked while 2nd didn't

[pieh]

There probably is weird interaction when site and theme are not "siblings". TBH I don't know much about setup you described in second approach. What I see usually is people setting up workspaces as in your 3rd approach

[pieh]

Ok, so I created minimal repro for 2nd case - https://github.com/pieh/i25619 and got same issue as you described (we can't fix first one as this is upstream issue with multiple graphql module instances).

[Mrazator]

So first case I would understand now, as linked package has its own node_modules, it might have happened that two different instances of graphql package were installed (exactly as you said). It is a pity though that due to that it is not possible to use yarn link.

The second case might be actually my fault and inproper use of workspaces. From yarn workspaces docs:

Workspaces must be descendants of the workspace root in terms of folder hierarchy. You cannot and must not reference a workspace that is located outside of this filesystem hierarchy.

The third case works, but it is far from perfect. I have multiple different instances of gatsby site, spread across multiple mono repositories. All of these sites are using one and only gatsby-theme-my-own-theme, living in a separate repository. The thing is that I would like to develop and test everything together (exactly what workspaces structure in the third case offers). However, as I have it spread into multiple repos, i cannot have it living next to each other.

I already tried to symlink the sites from monorepos next to the gatsby-theme-my-own-theme, but there were some problems with resolving dependencies (gatsby develop didn’t work, as it was not able to resolve gatsby package - probably because of the site being actually a symlink, or because the symlink was actually pointing from /home dir to /mnt/c/ - using WSL1). Even better way might be to actually add sites to my gatsby-theme repo as git submodules (maybe even sparse-checkouted submodules?), but i did not try it yet.

Do you have maybe some better idea?

[lucashfreitas]

Same issue here. Currently unable to debug/test packages locally using yarn link.