Ad
Webpack Error Due To ES2015 Template Literal - "Unterminated String Constant"
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 wey 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.
Ad
Answer
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
}
`;
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad