Cannot compile when using <ApolloQuery> tag

[ButeForce]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. create a new project using vue cli
2. install apollo cli using npm add apollo
3. use any apollo query inside app.vue
4. also i have followed the changes mentioned in

https://vue-apollo.netlify.com/guide/components/query.html#query-gql-tag

to update the webpack.config.js

Expected behavior the compiler fails to compile and throughs the below error:

./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-7ba5bd90","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue Module build failed: Error at Node.initialise (/Users/User/Documents/test-graphsql1/test-graph/node_modules/vue-template-es2015-compiler/buble.js:16016:10) at /Users/User/Documents/test-graphsql1/test-graph/node_modules/vue-template-es2015-compiler/buble.js:7993:51 at Array.forEach () at BlockStatement.initialise (/Users/User/Documents/test-graphsql1/test-graph/node_modules/vue-template-es2015-compiler/buble.js:7993:13) at Node.initialise (/Users/User/Documents/test-graphsql1/test-graph/node_modules/vue-template-es2015-compiler/buble.js:7286:10) at Node.initialise (/Users/User/Documents/test-graphsql1/test-graph/node_modules/vue-template-es2015-compiler/buble.js:8503:29) at Node.initialise (/Users/User/Documents/test-graphsql1/test-graph/node_modules/vue-template-es2015-compiler/buble.js:7286:10) at /Users/User/Documents/test-graphsql1/test-graph/node_modules/vue-template-es2015-compiler/buble.js:7284:56 at Array.forEach () @ ./src/App.vue 11:0-238 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Versions vue: "^2.5.11" vue-apollo: "^3.0.2" apollo-client:"^2.6.4"

Additional context My webpack.config.jo as below:

var path = require('path') var webpack = require('webpack')

module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /.vue$/, loader: 'vue-loader', options: { transpileOptions: { transforms: { dangerousTaggedTemplateString: true } } },

  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }
]

}, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' }

if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

and my app.vue file look below:

[1isten]

Same here. Passing a callback gql => gql... to :query causes this issue..

[awdsawdsawds]

I add this config in vue.config.js for vue-cli project.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.transpileOptions = options.transpileOptions || {}
        options.transpileOptions.transforms = options.transpileOptions.transforms || {}
        options.transpileOptions.transforms.dangerousTaggedTemplateString = true
        return options
      })
  }
}

It's work for me.