Uncaught Invariant Violation: RelayQL: Unexpected invocation at runtime.

[note89]

Hi don't really know where this issue fits in. But I have trouble getting relay to work in my phoenix project.

So here is my app https://github.com/note89/phoenix-hipster-stack/tree/master/web/static/js

package.json

  "dependencies": {
    "babel-core": "6.5.2",
    "babel-loader": "^6.2.3",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "6.5.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.0",
    "babel-preset-stage-0": "6.5.0",
    "babel-relay-plugin": "0.7.0",
    "classnames": "2.2.3",
    "graphql": "0.4.17",
    "graphql-relay": "0.3.6",
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "react-relay": "0.7.0",
    "webpack": "^1.12.13"
  },
  "devDependencies": {
    "babel-cli": "^6.5.1",
    "babel-eslint": "^4.1.8",
    "cors": "^2.7.1",
    "eslint": "^2.0.0",
    "eslint-plugin-react": "^3.16.1",
    "express": "^4.13.4",
    "webpack-dev-middleware": "^1.5.1",
    "webpack-hot-middleware": "^2.7.1"
  }

I get this error when i visit my localhost.

Uncaught Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `Relay.QL`.

Stack trace

invariant   @   invariant.js?2728:38
RelayQL @   RelayQL.js?0e08:39
store   @   AppHomeRoute.js?bcdb:5
Query   @   buildRQL.js?e9cb:90
instrumentedCallback    @   RelayProfiler.js?9a57:137
(anonymous function)    @   getRelayQueries.js?d29e:55
getRelayQueries @   getRelayQueries.js?d29e:48
instrumentedCallback    @   RelayProfiler.js?9a57:137
_runQueries @   RelayRenderer.js?a5ba:130
RelayRenderer   @   RelayRenderer.js?a5ba:109
ReactCompositeComponentMixin.mountComponent @   ReactCompositeComponent.js?cd59:148
wrapper @   ReactPerf.js?ef93:66
ReactReconciler.mountComponent  @   ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @   ReactCompositeComponent.js?cd59:225
wrapper @   ReactPerf.js?ef93:66
ReactReconciler.mountComponent  @   ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @   ReactCompositeComponent.js?cd59:225
wrapper @   ReactPerf.js?ef93:66
ReactReconciler.mountComponent  @   ReactReconciler.js?6bfa:37
mountComponentIntoNode  @   ReactMount.js?2f23:266
Mixin.perform   @   Transaction.js?6dff:136
batchedMountComponentIntoNode   @   ReactMount.js?2f23:282
Mixin.perform   @   Transaction.js?6dff:136
ReactDefaultBatchingStrategy.batchedUpdates @   ReactDefaultBatchingStrategy.js?ef70:62
batchedUpdates  @   ReactUpdates.js?ce09:94
ReactMount._renderNewRootComponent  @   ReactMount.js?2f23:476
wrapper @   ReactPerf.js?ef93:66
ReactMount._renderSubtreeIntoContainer  @   ReactMount.js?2f23:550
ReactMount.render   @   ReactMount.js?2f23:570
wrapper @   ReactPerf.js?ef93:66
(anonymous function)    @   app.js?4e0a:13
(anonymous function)    @   index.bundle.js:2295
__webpack_require__ @   index.bundle.js:535
fn  @   index.bundle.js:76
(anonymous function)    @   index.bundle.js:566
__webpack_require__ @   index.bundle.js:535
(anonymous function)    @   index.bundle.js:558
(anonymous function)    @   index.bundle.js:561

What I have tried. localhost:4000/graphql works changing app.js into plain React without Relay works making typos in the schema.json makes webpack complain. compiling with babel in the terminal seems to do what it should ? (guess its using the .babelrc)

$ ./node_modules/babel-cli/bin/babel.js ./web/static/js/routes/AppHomeRoute.js 
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(['\n      query MainQuery{\n        store {\n          ', '\n        }\n      }\n    '], ['\n      query MainQuery{\n        store {\n          ', '\n        }\n      }\n    ']);

var _reactRelay = require('react-relay');

var _reactRelay2 = _interopRequireDefault(_reactRelay);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _class = function (_Relay$Route) {
  _inherits(_class, _Relay$Route);

  function _class(props) {
    _classCallCheck(this, _class);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).call(this, props));
  }

  return _class;
}(_reactRelay2.default.Route);

_class.queries = {
  store: function store(Component) {
    return _reactRelay2.default.QL(_templateObject, Component.getFragment('store'));
  }
};
_class.routeName = 'AppHomeRoute';
exports.default = _class;

[note89]

Well of course i found the solution directly after posting this but after spending the whole day :P Maby the Relay documentation should tell about this bug ? and that you need this hack if you dont want to use the relay starter kit. https://github.com/BerndWessels/babel-relay-plugin-loader

[josephsavona]

It looks like the Relay plugin isn't configured correctly - the Relay.QL template literals are either being transformed away before the relay plugin sees them (note the call to _taggedTemplateLiteral at the top) or it isn't running at all.

I'd recommend double checking your Babel configuration and the docs for the relay plugin. If that doesn't help, asking on stack overflow or the discord channel might be the best bet since there's a wider audience of users to help diagnose problems.

[wincent]

Looks like the original issue was resolved, so closing due to inactivity. PRs welcome, however, from anybody who wants to improve the documentation. Thanks @note89.