Graphql-tag: Syntax Error: Unexpected Name "module"

[zhanghecool]

I am really embarrassed, I have a problem, need help, if there is time to help me? I checked a lot of information and still couldn't find a solution. thank you very much.

ERROR in ./src/routes/editorial/editorial.gql
Module build failed (from ./node_modules/graphql-tag/loader.js):
Syntax Error: Unexpected Name "module"

GraphQL request (1:1)
1: module.exports = __webpack_public_path__ + "src/routes/editorial/editorial.gql?d6f010f9";
   ^

    at syntaxError (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql/error/syntaxError.js:24:10)
    at unexpected (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql/language/parser.js:1491:33)
    at parseDefinition (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql/language/parser.js:155:9)
    at many (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql/language/parser.js:1521:16)
    at parseDocument (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql/language/parser.js:115:18)
    at parse (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql/language/parser.js:50:10)
    at parseDocument (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql-tag/src/index.js:129:16)
    at gql (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql-tag/src/index.js:170:10)
    at Object.module.exports (/Users/zhanghe/workflow/vcg-web-app/node_modules/graphql-tag/loader.js:44:18)
 @ ./src/routes/editorial/index.js 13:0-40
 @ ./src/routes/index.js
 @ ./src/router.js
 @ ./src/client.js
 @ multi @babel/polyfill ./tools/lib/webpackHotDevClient ./src/client.js

webpack

// Rules for GraphQL
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },

editorial.gql

query HomeNews {
  reactjsGetAllNews {
    title
    link
    author
    pubDate
    content
  }
}

import EDIT_QUERY from './editorial.gql';

"graphql": "^14.2.1",
"graphql-tag": "^2.10.1",
"apollo-boost": "^0.3.1",
"apollo-cache-inmemory": "^1.5.1",
"apollo-client": "^2.5.1",
"apollo-link": "^1.2.11",
"apollo-link-error": "^1.1.10",
"apollo-link-http": "^1.5.14",
"apollo-link-logger": "^1.2.3",
"apollo-link-schema": "^1.2.2",

[jnwng]

typically this is an issue with webpack configuration, sometimes due to fallthrough rules that are applying loaders multiple times to files. are you by-chance using create-react-app?

i'm going to close this since i dont think this is a loader issue but likely a webpack configuration issue

[zhanghecool]

@jnwng Thank you, I have solved this problem.

[zaffron]

@hertzZhang It would be really helpful for others if you could provide the solution for that

[abdul-takt]

@hertzZhang can you provide the solution?

[gabrielkay]

@hertzZhang ^ also curious how you solved it

[dabit1]

Really annoying people asking for solution and then when they solve it by theirself they don't share the solution.

[loune]

I had the same issue. In my case, it turns out the webpack rule for file-loader was matching .graphql files and transforming it. Adding /\.(graphql|gql)$/ to the exclude of the file-loader rule solved it.

[rabinage]

Got this error with create-react-app (ejected). Moving the grahpql rule just above the file-loader in the webpack config solved the issue for me.

[NeilRiver]

    {
      test: /\.(graphql|gql)$/,
      exclude: /\.(graphql|gql)$/,
      loader: 'graphql-tag/loader',
    },

[AlbertWhite]

If it is difficult to modify the webpack config, there is a walkaround solution with graphql.macro

import { loader } from 'graphql.macro';
const myQuery = loader('./query.gql');

const {data} = useQuery(myQuery)