graphql-code-generator: TypeError: func is not a function

Could you all update all codegen packages to the latest version and try again?

Work perfectly with the current versions. Thank you @ardatan

    "@graphql-codegen/cli": "1.21.3",
    "@graphql-codegen/introspection": "1.18.1",
    "@graphql-codegen/typescript": "1.21.1",
    "@graphql-codegen/typescript-operations": "1.17.15",
    "@graphql-codegen/typescript-react-apollo": "2.2.3",

We’re aware of the issue and working on it. Thanks for your patience.

seems exact package which causes issue is change-case-all

if you will explicitly lock it’s version on 1.0.12 it will work fine

In our case, the pascal-case dependency (v2.0.0) didn’t match the included type definition. The type def is import { pascalCase } from 'pascal-case' where as the js seems to be exporting the func as default, e.g. import pascalCase from 'pascal-case'.

I just tried installing the latest version of pascal-case (v3.1.1) explicitly and it fixed the issue.

this cause again in case using

"@graphql-codegen/typescript-operations": "1.17.15",

not cause on 1.17.14.

once updated to ‘1.17.15’ then even if I revert the version, the problem will continue to occur. some dependencies in this module must be the cause.

it looks graphql-codegen has a dependency of “change-case”: “^3.0.0”, but change-case has dependency of “pascal-case”: “^2.0.0”, so I think we need to update change-case to latest version. npm i -D change-case (it worked for me!)

or wait for maintainers to update the dependency to “change-case”: “^4.1.1”

Your configuration seems wrong. Under generates, we should have the output filenames

const dotenv = require('dotenv')

dotenv.config();

const apiSchema= {
  [`${process.env.GRAPHQL_URL}`]: {},
}

const generateOptions = {
  plugins: ["typescript", "typescript-operations", "typescript-react-apollo"],
  config: {
    skipTypename: false,
    withHooks: true,
    withHOC: false,
    withComponent: false,
    apolloReactHooksImportFrom: "@apollo/client",
  },
}

module.exports = {
  overwrite: true,
  generates: {
    'output.tsx': { // This should be the name of the output file 
      schema: apiSchema,
      documents: ["./src/api/graphql/mutations/*.gql", "./src/api/graphql/queries/*.gql"],
      ...generateOptions,
    },
  },
}

Instead of using js file, I’d recommend to have YML file like below;

schema: ${GRAPHQL_URL}
documents:
  - ./src/api/graphql/mutations/*.gql
  - ./src/api/graphql/queries/*.gql
generates:
  output.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      skipTypename: false
      withHooks: true
      withHOC: false
      withComponent: false
      apolloReactHooksImportFrom: "@apollo/client"

And you can run codegen with dotenv like this;

yarn graphql-codegen -r dotenv/config

@ardatan I tried reproducing this error, it’s not easy but I finally found something! It seems like the error is not related to the setup (client or server) at all - but has something to do with versioning - maybe npm.

When I removed the package-lock.json (something I otherwise always try to avoid as a solution) and did a fresh install with npm i @graphql-codegen/{cli,typescript,typescript-apollo-angular,typescript-operations,typescript-resolvers}@latest, the error was gone 🤔

Only thing is that now, I can’t reproduce 🤷🏾‍♂️

It worked ! Thanks a ton ! @ardatan

Codesandbox with the error: https://codesandbox.io/s/wispy-darkness-nxtp9

@ardatan It works perfectly too! thank you!

@ardatan thank you so much, you are the best!

@dotansimha We don’t use change-case anymore and I don’t think even npm gets confused with ^ 😃