[babel-relay-plugin] v4+ Uncaught TypeError: Cannot read property 'length' of undefined

[BerndWessels]

Hello
I have a problem when upgrading from babel-relay-plugin 0.3.0 to 0.4.x.

With 0.3.0 everything works just fine but with 0.4.x I get this error in Chrome:

Uncaught TypeError: Cannot read property 'length' of undefined

relay.0.4.0.js in line 5394

if (GraphQL.isQuery(node) && node.fragments.length === 0) {

The problem is that the node object does not have a fragments property.

You can easily reproduce it yourself with my Git Repo.

To reproduce just change from
"babel-relay-plugin-loader": "^0.3.0"
to
"babel-relay-plugin-loader": "^0.4.0"

then run
npm install
then in one console run
npm run schema:serve
and in another console run
npm start

Now you will see the error in the Chrome DevTools.

Thank you
Bernd

[josephsavona]

@BerndWessels this has been fixed on master, and i believe the fix is also available in react-relay 0.5.0. It's important to upgrade react-relay and babel-relay-plugin together.

[BerndWessels]

Thank you @josephsavona , but it looks like that there is no babel-relay-plugin with version 0.5.0 on npm.

Can you please publish it?

Thank you
Bernd

[josephsavona]

@BerndWessels the issue is that you are using a newer plugin version (0.4.0) with an out of date version of react-relay, 0.4.0. Please upgrade react-relay to 0.5.0.

[BerndWessels]

@josephsavona I am already referencing react-relay in version 0.5.0:

"dependencies": {
  "bootstrap": "^3.3.0",
  "react": "^0.14.0",
  "react-bootstrap": "^0.28.0",
  "react-dom": "^0.14.0",
  "react-relay": "^0.5.0",
  "react-router": "^1.0.0",
  "react-router-relay": "^0.8.0"
},
"devDependencies": {
  "autoprefixer": "^6.0.0",
  "babel": "^5.0.0",
  "babel-core": "^5.0.0",
  "babel-eslint": "^4.0.0",
  "babel-loader": "^5.0.0",
  "babel-plugin-react-transform": "^1.0.0",
  "babel-relay-plugin": "^0.4.0",
  "babel-relay-plugin-loader": "^0.3.0",
  "babel-runtime": "^5.0.0",
  "browser-sync": "^2.0.0",
  "browser-sync-webpack-plugin": "^1.0.0",
  "clean-webpack-plugin": "^0.1.0",
  "copy-webpack-plugin": "^0.2.0",
  "cors": "^2.0.0",
  "css-loader": "^0.23.0",
  "express": "^4.0.0",
  "express-graphql": "^0.4.0",
  "extract-text-webpack-plugin": "^0.9.0",
  "file-loader": "^0.8.0",
  "graphql": "^0.4.0",
  "graphql-relay": "^0.3.0",
  "history": "^1.0.0",
  "html-webpack-plugin": "^1.0.0",
  "isparta-instrumenter-loader": "^1.0.0",
  "jasmine-core": "^2.0.0",
  "karma": "^0.13.0",
  "karma-chrome-launcher": "^0.2.0",
  "karma-coverage": "^0.5.0",
  "karma-jasmine": "^0.3.0",
  "karma-phantomjs-launcher": "^0.2.0",
  "karma-sourcemap-loader": "^0.3.0",
  "karma-spec-reporter": "^0.0.22",
  "karma-webpack": "^1.0.0",
  "less": "^2.0.0",
  "less-loader": "^2.0.0",
  "node-libs-browser": "^0.5.0",
  "null-loader": "^0.1.0",
  "phantomjs": "^1.0.0",
  "postcss-loader": "^0.8.0",
  "raw-loader": "^0.5.0",
  "react-transform-catch-errors": "^1.0.0",
  "react-transform-hmr": "^1.0.0",
  "redbox-react": "^1.0.0",
  "relay-local-schema": "^0.3.0",
  "style-loader": "^0.13.0",
  "webpack": "^1.0.0",
  "webpack-dev-server": "^1.0.0"
}

But that doesn't solve the problem. The problem must be with the babel-relay-plugin itself?

[josephsavona]

Hmm, the fix might not have made it into the latest versions. We'll release 0.6.0 soon, which will address this.

[BerndWessels]

@josephsavona OK, thank you. I will wait for that then and let you know if that fixes it.

I am still confused about if there needs to be a babel-relay-plugin release in sync with the react-relay releases?

Thanks
Bernd

[josephsavona]

We do release the two packages in parallel, but the version numbers aren't identical. It could definitely reduce confusion if we kept the minor version numbers in sync, though.

[BerndWessels]

Hi @josephsavona
I upgraded to 0.6.0 but unfortunately the error is still present. Can you please have a look at it again if it is really fixed?
Updated details can be found here
Thank you
Bernd