Graphql-tag: parse is not a function

[lfernando-silva]

I'am getting error at query declaration.

index.js:128 Uncaught TypeError: parse is not a function

Debugging, I realized the method parse at node_modules/graphql-tag/src/index.js is really undefined:

//node_modules/graphql-tag/src/index.js
var parser = require('graphql/language/parser');

var parse = parser.parse; //parse is undefined
//...
//line 128
var parsed = parse(doc); //parse is not a function

This is my code. I'm using create-react-app (v 1.5.1) and already tried to rewire. Also didn't work with the example query.

import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

const CREATE_USER_MUTATION = gql`  
mutation createUserMutation ($name: String, $email: String, $category: String, $phone: String, $defaultAddress: String, $image: String, $updatedAt: Int, $createdAt: Int) {
    createUser(name: $name, email: $email, category: $category, phone: $phone, defaultAddress: $defaultAddress, image: $image, updatedAt: $updatedAt, createdAt: $createdAt) {
      id
      name
      email
      category
      phone
      defaultAddress
      createdAt
    }
  }
`

export default graphql(CREATE_USER_MUTATION, {name: 'createUserMutation'})

The query can be parsed well at AST explorer.

Can anyone help me?

[jnwng]

@lfernando-silva we establish graphql-js as a peerDependency. can you make sure that's installed?

[rogchap]

I have the same issue on a fresh new create-react-app.
I've made sure graphql-js is installed an all the typescript definitions for parse is resolving in my IDE, just not in the browser.

[rogchap]

Ok, I found the issue: does not work with the latest [email protected] you must use [email protected]

[DogPawHat]

Are you sure it's 0.13.0 and not 0.13.1? There was a change to graphql-js that I think only broke graphql-tag. Issue is at graphq-js/#1248.

[sznrbrt]

Just had the same issue, but downgrading back to 0.13.0 solved it. Thanks @DogPawHat!
Working setup: [email protected] [email protected] [email protected]

[DogPawHat]

Working setup for me (Typescript) is same as above, with react-apollo at 2.1.0-beta.2, and @types\[email protected] and @types\[email protected] (which I believe is a separate issue with react-apollo)

[lfernando-silva]

For me, as @sznrbrt and @DogPawHat said, downgrading the graphql version to 0.13.0 works. Really, seems it's a problem with graphql module. Thank you guys

[sebkamil]

Is there an open issue on the graphql repo for this? I'd like to know when I can go past 0.13.0 Thanks

[DogPawHat]

@sebkamil its at graphq-js/#1248. Still figuring it out it seems.

[jnwng]

i believe this is an issue upstream. see https://github.com/graphql/graphql-js/issues/1248. closing for now!

[jnwng]

Will have to take a closer look at importing GraphQL-js at 0.13 and 14.0

[datlife]

I would like to confirm that upgrading the react-scripts to 1.1.2 cleared the issue of parse is not a function. I am currently using create-react-app for client

npm install --save --save-exact [email protected]

Reference: graphql/graphql-js#1248 .

[cooperka]

@datlife I've been using react-scripts v1.1.2 but still getting the same type of error:

TypeError: graphql_1.parse is not a function
    at eval (introspectSchema.js?d6eb:40)

Downgrading to graphql v0.13.0 is still the only successful workaround for me so far.

[mikelax]

I can confirm this is still an issue with graphql v0.13.2, downgrading to 0.13.0 worked for me as well.

[nfantone]

For anyone else out there reaching this from Google, this is _still_ an issue with [email protected].

[donovanhiland]

This seems to be the answer to the problem. For me at least.

https://github.com/graphql/graphql-js/issues/1248#issuecomment-378086769

It had to do with webpack resolving .mjs extensions before .js

[wtfleming]

Suggestion from @donovanhiland works for me too. For people like me coming to this from Google I had ejected from create-react-app and in config/webpack.config.prod.js and config/webpack.config.dev.js need to change the line

extensions: ['.re', '.ml', '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],

to

extensions: ['.re', '.ml', '.web.js', '.js', '.json', '.web.jsx', '.jsx', '.mjs'],

in both files and this fixed it for me.

I'm using the ReasonReact scripts, so your config probably looks a bit different, but what is important is the .mjs comes after .js

[andykenward]

@wtfleming webpack extensions change for .mjs solved the issue for [email protected] for me using [email protected]. Thanks

[mozillo]

My versions of graphql and graphql-tag never changed.

    "graphql": "^0.12.3",
    "graphql-tag": "^2.6.1",

Same issue, work fine before updating yarn.lock
show

TypeError: parse is not a function
parseDocument
node_modules/graphql-tag/src/index.js:129
  126 |   return docCache[cacheKey];
  127 | }
  128 | 
> 129 | var parsed = parse(doc, { experimentalFragmentVariables: experimentalFragmentVariables });
  130 | if (!parsed || parsed.kind !== 'Document') {
  131 |   throw new Error('Not a valid GraphQL document.');
  132 | }

after updating yarn.lock

[jnwng]

this seems like an issue with graphql-js with resolutions provided above (resolving .mjs after .js). i dont have much control over that here since we depend on graphql-js as a peerDependency, so i'm going to close this again. for reference, this seems to be the resolution: https://github.com/apollographql/graphql-tag/issues/155#issuecomment-390032903

please re-open if you're having this issue with [email protected] and the .mjs resolution steps above did not resolve the issue you're having here.

[cooperka]

I'm using react-static which has its own webpack config, so the suggested workaround for create-react-apps (resolving .mjs after .js) doesn't help me. Here's what worked.

Put it in a postinstall script so it runs automatically. Seems good enough for now, I've spent too many hours debugging this 💩

# Remove all .mjs files from graphql:
find node_modules/graphql -type f -name *.mjs | xargs rm