Graphql-code-generator: Parsing files with React's JSX in *.js files throws SyntaxError: Unexpected token

[lukaskl]

Describe the bug

To Reproduce
it is fairly simply to reproduce:

open any folder and run these commands:

npx create-react-app codegen-react-js
cd codegen-react-js
yarn add graphql
yarn add -D @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo

this will create a new react app (using create-react-app) and will add default packages (those are added by graphql-codegen init

then add the following codegen.yml
``` codegen.yml
overwrite: true
schema: "https://countries.trevorblades.com/"
documents: "src/*/.{js,jsx,ts,tsx}"
generates:
src/generated/graphql.tsx:
plugins:
- "typescript"
- "typescript-operations"
- "typescript-react-apollo"
./graphql.schema.json:
plugins:
- "introspection"

where the schema endpoint was taken randomly from the https://github.com/APIs-guru/graphql-apis

note the inclusion of `*.js` files. This file extension is a default if you are using create-react-app and actually jsx syntax is quite expected there. 

and execute 

yarn graphql-codegen generate --config codegen.yml

no need not even to add any usage of `gql` tag or add any of`*.graphql` files

**Actual behaviour**

<img src="https://user-images.githubusercontent.com/4083977/59015579-fec6ae80-8847-11e9-8645-b12f7e648bc1.png" width="300" />


**Expected behavior**
<!-- A clear and concise description of what you expected to happen. -->

<img src="https://user-images.githubusercontent.com/4083977/59015643-2158c780-8848-11e9-86e7-432b8a3941fb.png"  width="200" />

I'm able to get this if I'm changing all files using React from `*.js` to `*.jsx`

**Environment:**

- OS: macOS 10.14.5
- NodeJS: v8.15.1
- yarn 1.15.2
- npm: 6.9.0
- @graphql-codegen/cli 1.2.0
- @graphql-codegen/introspection 1.2.0
- @graphql-codegen/typescript 1.2.0
- @graphql-codegen/typescript-operations 1.2.0
- @graphql-codegen/typescript-react-apoll ^1.2.0

**Questions**
<!-- Add any other context about the problem here. -->

However, maybe I'm missing something? Maybe there is a config property where it would be possible to set to treat `*.js` files as `*.jsx` or maybe there is a loader that I could set in `codegen.yml`? e.g.:

documents:
- "./src//.js":
loader: ""
- "./src//.jsx"
```

[WhiteAbeLincoln]

I believe I am also getting this issue. I'm sourcing gatsbyjs's fragments as recommended here, but always receive this same error unless I remove the line from my documents. This was working a few weeks ago, so a minor update in gatsby, graphql-code-generator, or graphql-tag-pluck must have broken it.

[lukaskl]

I've made a _quick workaround_

changing codegen.yml as follows:

documents:
    - "./src/**/*.js":
        loader: "./js-react-loader.js"
    - "./src/**/*.{jsx,ts,tsx}"

and js-react-loader.js content is:
```js-react-loader.js
const { parse } = require('graphql');
const { readFileSync } = require('fs');
const glob = require('glob');
const gqlPluck = require('graphql-tag-pluck').default;

module.exports = function(docString, config) {
const files = glob.sync(docString);

return files
.map(path => {
const fileContent = readFileSync(path, { encoding: 'utf-8' });
const gql = gqlPluck.fromCodeString(fileContent, { fileExt: '.jsx' });

  if (!gql.trim()) {
    return;
  }

  return {
    filePath: path,
    content: parse(gql)
  };
})
.filter(x => x);

};
```

there is one problem though, if error is thrown - it redirects to a wrong line number.

[dotansimha]

You are right, we are using graphql-tag-pluck (https://github.com/DAB0mB/graphql-tag-pluck) for extracting documents from code files.
I think it assumes that .jsx extension is the only valid extension for React code files (see https://github.com/DAB0mB/graphql-tag-pluck/blob/master/src/config.js#L40-L48).

@DAB0mB Can you please take a look?

[DAB0mB]

@dotansimha can you look at the changes that I made? Does this seem like a good solution?

[dotansimha]

@DAB0mB Looks good :) Can you release a new version of graphql-tag-pluck?

[dotansimha]

Fixed in 1.3.0 🎉

[FezVrasta]

I'm having the same issue after I upgraded to create-react-app 4.0 and removed the React imports due to the new JSX transform plugin

[dotansimha]

@FezVrasta can you please report that in graphql-tools repo? the code the does the extraction is managed there now.
@ardatan fyi

[FezVrasta]

I'm sorry, it may not be related actually, it was failing during a pre-commit hook but on my master branch with clean git state it works, so it must be smth different 🤦‍♂️