CODEWITHSUNDEEP
reactjsbabeljsgraphqlrelay
Trunks
Trunks

Reputation: 33

Plugin 0 specified in 'foreign' provided an invalid property of '_c'

Getting above error with below configuration, how should I make it working?

.babelrc: 

{
  "passPerPreset": true,
  "presets": [
    {"plugins": ["./build/babelRelayPlugin"]},
    "react",
    "es2015",
    "stage-0"
  ]
}

package.json: 

{
  "name": "1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-relay-plugin": "^0.9.2",
    "express": "^4.14.0",
    "express-graphql": "^0.5.3",
    "graphql": "^0.6.2",
    "graphql-relay": "^0.4.2",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-relay": "^0.9.2",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.0"
  },
  "devDependencies": {
    "babel-cli": "^6.14.0"
  }
}

server.js:

//
//
//
const compiler = webpack({
  entry: path.resolve(__dirname, 'js', 'app.js'),
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [ path.resolve(__dirname, "js") ],
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
        },
      }
    ],
  },
  output: {filename: '/app.js', path: '/', publicPath: '/js/'}
});
const appServer = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': 'http://localhost:8000'},
  publicPath: '/js/',
  stats: {colors: true}
});
//
//
//

Terminal Error: babel-node server.js

ERROR in ./js/app.js
Module build failed: Error: Plugin 0 specified in 'foreign' provided an invalid property of '_c'

Browser Error: localhost: 3000

in the console window:

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.

Upvotes: 3

Views: 951

Answers (1)

alex
alex

Reputation: 5573

I have had success using the following setup. I am using the plugin with the babel loader in my webpack module rather than in .babelrc

In webpack:

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

In .babelrc:

{
  "passPerPreset": true,
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ]
}

Upvotes: 2

Related Questions