TypeError: loader.loaderId is not a function

[ekil1100]

Describe the bug Running graphql codegen, get the error:

// use yarn
TypeError: loader.loaderId is not a function
    at /Users/like/repo/mine/blog2.0/node_modules/graphql-config/index.cjs.js:430:79
    at Array.some (<anonymous>)
    at LoadersRegistry.register (/Users/like/repo/mine/blog2.0/node_modules/graphql-config/index.cjs.js:430:28)
    at CodegenExtension (/Users/like/repo/mine/blog2.0/node_modules/@graphql-codegen/cli/index.cjs.js:333:24)
    at GraphQLExtensionsRegistry.register (/Users/like/repo/mine/blog2.0/node_modules/graphql-config/index.cjs.js:523:25)
    at /Users/like/repo/mine/blog2.0/node_modules/graphql-config/index.cjs.js:637:30
    at Array.forEach (<anonymous>)
    at new GraphQLConfig (/Users/like/repo/mine/blog2.0/node_modules/graphql-config/index.cjs.js:636:20)
    at Object.<anonymous> (/Users/like/repo/mine/blog2.0/node_modules/graphql-config/index.cjs.js:591:43)
    at step (/Users/like/repo/mine/blog2.0/node_modules/tslib/tslib.js:143:27)
error Command failed with exit code 1

// use pnpm
❯ pnpm graphql codegen
TypeError: loader.loaderId is not a function
    at /Users/like/repo/mine/blog2.0/node_modules/.pnpm/[email protected]_e33ab83e163f084e27af018354a4217a/node_modules/graphql-config/index.cjs.js:430:79
    at Array.some (<anonymous>)
    at LoadersRegistry.register (/Users/like/repo/mine/blog2.0/node_modules/.pnpm/[email protected]_e33ab83e163f084e27af018354a4217a/node_modules/graphql-config/index.cjs.js:430:28)
    at CodegenExtension (/Users/like/repo/mine/blog2.0/node_modules/.pnpm/@[email protected]_a3890eca04e33d0e046f994245c782cb/node_modules/@graphql-codegen/cli/index.cjs.js:333:24)
    at GraphQLExtensionsRegistry.register (/Users/like/repo/mine/blog2.0/node_modules/.pnpm/[email protected]_e33ab83e163f084e27af018354a4217a/node_modules/graphql-config/index.cjs.js:523:25)
    at /Users/like/repo/mine/blog2.0/node_modules/.pnpm/[email protected]_e33ab83e163f084e27af018354a4217a/node_modules/graphql-config/index.cjs.js:637:30
    at Array.forEach (<anonymous>)
    at new GraphQLConfig (/Users/like/repo/mine/blog2.0/node_modules/.pnpm/[email protected]_e33ab83e163f084e27af018354a4217a/node_modules/graphql-config/index.cjs.js:636:20)
    at Object.<anonymous> (/Users/like/repo/mine/blog2.0/node_modules/.pnpm/[email protected]_e33ab83e163f084e27af018354a4217a/node_modules/graphql-config/index.cjs.js:591:43)
    at step (/Users/like/repo/mine/blog2.0/node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.js:143:27)

Versions (please complete the following information):

• OS: macOS Big Sur 11.5.1

dependencies:
@emotion/react 11.4.1
@emotion/styled 11.3.0
@graphql-codegen/typescript 2.0.0
@graphql-codegen/typescript-graphql-request 4.0.0
@graphql-codegen/typescript-operations 2.0.1
graphql 15.5.1
graphql-request 3.5.0
next 11.1.0
react 17.0.2
react-dom 17.0.2

devDependencies:
@emotion/babel-plugin 11.3.0        @types/node 16.6.1                  lint-staged 11.1.2
@graphql-cli/codegen 2.0.1          @types/react 17.0.18                npm-run-all 4.1.5
@graphql-cli/coverage 2.1.0         eslint 7.32.0                       prettier 2.3.2
@graphql-cli/diff 2.1.0             eslint-config-like 2.1.1            stylelint 13.13.1
@graphql-cli/similar 2.1.0          eslint-config-next 11.1.0           stylelint-config-prettier 8.0.2
@graphql-cli/validate 2.1.0         graphql-cli 4.1.0                   stylelint-config-recommended 5.0.0
@graphql-codegen/cli 2.0.1          husky 7.0.1                         typescript 4.3.5

[jackall3n]

Same here.

Looks like something to do with invoking loaderId() of @graphql-tools/code-file-loader.

Add a console log to the issue area.

LoadersRegistry.prototype.register = function (loader) {
    console.log(loader, loader.loaderId);
    if (!this._loaders.some(function (l) { return l.loaderId() === loader.loaderId(); })) {
        this._loaders.push(loader);
    }
};

// Output
GraphQLFileLoader {} [Function: loaderId]
UrlLoader {} [Function: loaderId]
JsonFileLoader {} [Function: loaderId]
GraphQLFileLoader {} [Function: loaderId]
CodeFileLoader { config: {} } undefined

[jackall3n]

Here is the issue: https://github.com/ardatan/graphql-tools/commit/9c26b847838a9b5357dfcfb9015e7c6558f0ef89#r54088878

[jackall3n]

Related: https://github.com/ardatan/graphql-tools/issues/3246 Related: https://github.com/dotansimha/graphql-code-generator/issues/6374#issuecomment-888410691

Looks like the current solution (for prisma-loader) is to lock the package to a specific version that includes the loaderId() method that's been removed from all the @graphql-tools packages. I think this will be required for other packages as well until a more formalised solution is created.

[ekil1100]

The current workaround is to use @graphql-codegen/cli instead of graphql-cli.

[n3ps]

Related: ardatan/graphql-tools#3246 Related: dotansimha/graphql-code-generator#6374 (comment)

Looks like the current solution (for prisma-loader) is to lock the package to a specific version that includes the loaderId() method that's been removed from all the @graphql-tools packages. I think this will be required for other packages as well until a more formalised solution is created.

What is the last known good version?

[felipeptcho]

I took a look at this: https://github.com/ardatan/graphql-tools/issues/3246#issuecomment-888311703 I'm not using prisma-loader, so for me, the problem is that graphql-cli still depends on an old version of graphql-config that requires the loaderId() function.

We have this PR to update it to the latest version (4.1.0), but until it gets merged I just had to lock graphql-config to the latest version in my package.json file:

"resolutions": {
  "graphql-config": "4.1.0"
}

[rburgst]

any news on this?

[ekil1100]

@rburgst This repo hasn't been updated since Aug 20, 2021, except deps updates. I don't know if they are maintaining this or not.

[bigslycat]

@rburgst yes, It deprecated: https://the-guild.dev/graphql/codegen/docs/migration/graphql-cli