CODEWITHSUNDEEP
reactjsgraphql
Pawandeep Singh
Pawandeep Singh

Reputation: 27

graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site

enter image description here below is the link that the actual error am facing i m facing this problem in simple react-js relay modern i have tried these all kind of steps about the babel-loader like

package.json in package.json i have tried this after find some solutions but i didn't fix it

"devDependencies": {
    "babel-plugin-relay": "^4.0.0",
    "graphql": "^14.3.1",
    "relay-compiler": "^4.0.0"
  },

i am start with graphql but facing this problem i have already create schema and successfully run "yarn run relay" but still this error

import React from 'react';
import  env  from './environment';
import { graphql, QueryRenderer } from 'react-relay';

const App = () => (
  <QueryRenderer
    environment={env}
    query={graphql`
      query AppQuery{
        allPersons {
          id
          name
        }
      }
    `}
    variables={{}}
    render={({error, props}) => {
      if (error) {
        return <div>Error!</div>;
      }if(!props){
        return <div>Loading...</div>;
      }
      return <div>user</div>;
    }}
  />
);
export default App;

Upvotes: 1

Views: 3549

Answers (3)

Florian Laplantif
Florian Laplantif

Reputation: 111

I ran into this issue and tried everything and it did not help, until I realized I was updating .babelrc but changes were not being actually used by babel.

This was because I use babel-loader with webpack and specified presets/plugins directly in the webpack config.

Updating the webpack config to add the relay plugin worked, when nothing else did.

Upvotes: 2

NULL pointer
NULL pointer

Reputation: 1377

There are a number of places you can import graphql from. I see above you are importing from react-relay.

I found that if I changed from 

import { graphql, QueryRenderer } from "react-relay";

to

import { QueryRenderer } from "react-relay";
import graphql from 'babel-plugin-relay/macro';

it fixed my problem. I think this is because the presets determined by the "babel": key in the package.json apply to the babel plugin's graphql and not react-relay's graphql.

Upvotes: 4

Pawandeep Singh
Pawandeep Singh

Reputation: 27

use this command

npm eject

and open your package.json file add this babel settings

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "relay"
      ]
    ]
  }

Upvotes: 0

Related Questions