Странная проблема, с которой я столкнулся. Использование 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
С использованием:
Я медленно предполагаю, что это может быть ошибка с моей конфигурацией Babel или Vue? Кто-нибудь может пролить свет на это?
Спасибо!
да, добавил с vue add apollo
Я думаю, что плагин уже загружает graphql-tag / loader, и вы запускаете его дважды, имея собственное правило веб-пакета. Вы пробовали это без специального правила и, возможно, переименовали файл в .gql?
спасибо, я думаю, что все. Я воссоздал проект и не добавил правила в vue.config.js, и он работает нормально!





Я столкнулся с той же проблемой, и казалось, что 2 загрузчика приводят к сбою.
Я установил graphql-tag и webpack-graphql-loader.
Попробуйте удалить все пакеты, которые включают apollo или graphql, и снова установите их, используя vue cli. vue add apollo. У меня это сработало.
Вы используете vue-cli-plugin-apollo?