graphql-tag/loader: Ошибка сборки модуля с GraphQLError: Syntax Error

Странная проблема, с которой я столкнулся. Использование Vue-CLI3 npm run serve.

Иметь следующую конфигурацию:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
      .loader('graphql-tag/loader')
      .end();
  }
};

и один файл .graphql:

mutation AddOfficeMutation(
    $name: String
    $location: String
  ) {
    createOffice(
      input: {office: { name: $name, location: $location }}
    ) {
      office {
        id
        name
        location
      }
    }
  }

при запуске npm run serve я получаю следующую ошибку:

ERROR  Failed to compile with 1 errors                                                                                                                                                           1:11:08 PM

 error  in ./src/graphql/AddOfficeMutation.graphql

Module build failed (from ./node_modules/graphql-tag/loader.js):
GraphQLError: Syntax Error: Unexpected Name "var"
    at syntaxError (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/error/syntaxError.js:24:10)
    at unexpected (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1490:33)
    at parseDefinition (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:153:9)
    at many (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1520:16)
    at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:113:18)
    at parse (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:48:10)
    at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:129:16)
    at gql (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:170:10)
    at Object.module.exports (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/loader.js:44:18)

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AddOfficeForm.vue?vue&type=script&lang=js& 29:0-69 59:18-35
 @ ./src/components/AddOfficeForm.vue?vue&type=script&lang=js&
 @ ./src/components/AddOfficeForm.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/AddOfficeView.vue?vue&type=script&lang=js&
 @ ./src/views/AddOfficeView.vue?vue&type=script&lang=js&
 @ ./src/views/AddOfficeView.vue
 @ ./src/router/routes.js
 @ ./src/router/router-config.js
 @ ./src/main.js
 @ multi ./node_modules/@vue/cli-service/node_modules/webpack-dev-server/client?http://192.168.0.99:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

С использованием:

  • "graphql": "^14.0.2"
  • "graphql-тег": "^2.10.0"

Я медленно предполагаю, что это может быть ошибка с моей конфигурацией Babel или Vue? Кто-нибудь может пролить свет на это?

Спасибо!


person Daniel da Rocha    schedule 04.11.2018    source источник
comment
Используете ли вы vue-cli-plugin-apollo?   -  person Andreas    schedule 04.11.2018
comment
да, я добавил его с помощью vue add apollo   -  person Daniel da Rocha    schedule 04.11.2018
comment
Я думаю, что плагин уже загружает graphql-tag/loader, и вы запускаете его дважды, используя собственное правило веб-пакета. Вы пробовали это без пользовательского правила и, возможно, переименовав файл в .gql?   -  person Andreas    schedule 04.11.2018
comment
спасибо, я думаю, что это было. Я пересоздал проект и не добавлял правила в vue.config.js, и он работает нормально!   -  person Daniel da Rocha    schedule 05.11.2018


Ответы (1)


Я столкнулся с той же проблемой, и казалось, что 2 загрузчика приводят к сбою.

Я установил graphql-tag и webpack-graphql-loader .

Попробуйте удалить все пакеты, включающие apollo или graphql, и переустановите снова, используя vue cli. vue add apollo. Это сработало для меня.

person Dario Rusignuolo    schedule 21.11.2019