Webpack error due to ES2015 template literal - "Unterminated string constant"

Question

I'm trying make a Relay.QL call with a ES2015 template literal as per the documentation but Webpack is not happy with it.

This is the file that contains the Relay.QL call:

import React from "react";
import ReactDOM from "react-dom";
import Relay from "react-relay";
import Main from "./components/Main";

ReactDOM.render(<Main />, document.getElementById('react'));

console.log(
    Relay.QL'
        {
            links {
                title
            }
        }
        '
);

And this is the Webpack error:

ERROR in ./js/app.js
Module build failed: SyntaxError: C:/websites/rgrjs/js/app.js: Unterminated string constant (11:12)
   9 |
  10 | console.log(
> 11 |     Relay.QL'
     |             ^
  12 |         {
  13 |             links {
  14 |                 title
    at Parser.pp.raise (C:\websites\rgrjs\node_modules\babylon\index.js:1413:13)

It looks like Webpack doesn't like the ES2015 template literal used by Relay.QL?

I've included ES2015 options in my webpack.config.js file as follows:

       query: {
            presets: ['react', 'es2015', 'stage-0'],
            plugins: ['./babelRelayPlugin']
        }

And finally the .babelRelayPlugin file looks like this:

// `babel-relay-plugin` returns a function for creating plugin instances
var getBabelRelayPlugin = require('babel-relay-plugin');

// load previously saved schema data (see "Schema JSON" below)
var schemaData = require('./data/schema.json').data;


module.exports = getBabelRelayPlugin(schemaData);

Is there something else I need to do? I'm new to Relay and ES2015, so I'm probably missing something obvious.

Answer 1

Template literals are denoted with backticks, not quotation marks.

Relay.QL`...`

If you look more closely at the example you will notice that they are using backticks as well:

var fragment = Relay.QL`
  fragment on User {
    name
  }
`;