Unknown plugin “Relay” - React, GraphQL and Relay

Question

I'm a beginner in GraphQL. I just started to follow the tutorial in Here But I'm getting this compilation problem:

Unknown plugin "Relay"

This is my package.json

{
 "name": "hackernews-react-relay",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "autoprefixer": "7.1.2",
 "babel-core": "^6.5.2",
 "babel-eslint": "7.2.3",
 "babel-jest": "20.0.3",
 "babel-loader": "7.1.1",
 "babel-preset-react-app": "^3.0.2",
 "babel-runtime": "6.26.0",
 "case-sensitive-paths-webpack-plugin": "2.1.1",
 "chalk": "1.1.3",
 "css-loader": "0.28.4",
 "dotenv": "4.0.0",
 "eslint": "4.4.1",
 "eslint-config-react-app": "^2.0.0",
 "eslint-loader": "1.9.0",
 "eslint-plugin-flowtype": "2.35.0",
 "eslint-plugin-import": "2.7.0",
 "eslint-plugin-jsx-a11y": "5.1.1",
 "eslint-plugin-react": "7.1.0",
 "extract-text-webpack-plugin": "3.0.0",
 "file-loader": "0.11.2",
 "fs-extra": "3.0.1",
 "html-webpack-plugin": "2.29.0",
 "jest": "20.0.4",
 "object-assign": "4.1.1",
 "postcss-flexbugs-fixes": "3.2.0",
 "postcss-loader": "2.0.6",
 "promise": "8.0.1",
 "react": "^15.6.1",
 "react-dev-utils": "^4.0.1",
 "react-dom": "^15.6.1",
 "react-relay": "^1.3.0",
 "style-loader": "0.18.2",
 "sw-precache-webpack-plugin": "0.11.4",
 "url-loader": "0.5.9",
 "webpack": "3.5.1",
 "webpack-dev-server": "2.7.1",
 "webpack-manifest-plugin": "1.2.1",
 "whatwg-fetch": "2.0.3"
},
 "scripts": {
 "start": "node scripts/start.js",
 "build": "node scripts/build.js",
 "test": "node scripts/test.js --env=jsdom"
},
"devDependencies": {
  "babel-plugin-relay": "^1.3.0",
  "relay-compiler": "^1.3.0"
},
  "jest": {
  "collectCoverageFrom": [
  "src/**/*.{js,jsx}"
],
"setupFiles": [
  "<rootDir>/config/polyfills.js"
],
"testMatch": [
  "<rootDir>/src/**/__tests__/**/*.js?(x)",
  "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
  "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
  "^react-native$": "react-native-web"
},
"moduleFileExtensions": [
  "web.js",
  "js",
  "json",
  "web.jsx",
  "jsx",
  "node"
]
},
"babel": {
  "presets": [
    "react-app"
   ],
  "plugins": [
     "relay"
   ]
  },
    "eslintConfig": {
    "extends": "react-app"
  }
 }

I'm following step by step the tutorial mentioned above.

OS: Ubuntu 17.04 Node 8.0.0 npm 5.0.0

I've already trying to solve this problem by adding this to babel-presets

"es2015",
"stage-0",
"react"

and this to babel plugins

"babel-relay-plugin-loader"

But nothing works.

Answer 1

Instead of providing a relay option in your plugins definition, you can create a file called for example babelRelayPlugin.js and put the plugin definition there since the plugin needs to load the schema before used. There you can import the getBabelRelayPlugin pass in the schema and export it back.

import getbabelRelayPlugin from 'babel-relay-plugin';
import schema from '../schema/schema.json';

export default getbabelRelayPlugin(schema.data);

Then use this file in your plugins definition instead.

"babel": {
  "presets": [
    "react-app"
   ],
  "plugins": [
     "./babelRelayPlugin"
   ]
  },
    "eslintConfig": {
    "extends": "react-app"
  }
 }

note : I am assuming that both the package.json and the babelRelayPlugin.js files live in the same directory