Relay: v2.0.0 TypeError: Cannot read property 'readContext' of null

[tranduchieu]

I got this error when upgrading to v2.0.0. Anybody got the same problem?

[sibelius]

What is your react version?
Check release for required React version

[sibelius]

• Upgrade react to 16.5.0

[tranduchieu]

I tried 16.5, 16.6, 16.7 still the same error.

package.json

{
  "name": "tocu",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "relay": "relay-compiler --src ./src --schema ./schema.graphql",
    "flow:start": "flow start"
  },
  "dependencies": {
    "buffer": "^5.2.1",
    "emoji-utils": "^1.0.1",
    "final-form": "^4.11.0",
    "final-form-arrays": "^1.1.1",
    "final-form-calculate": "^1.3.0",
    "graphql": "^0.13.2",
    "lodash": "^4.17.5",
    "moment": "^2.22.1",
    "native-base": "^2.7.0",
    "prop-types": "^15.6.1",
    "querystring": "^0.2.0",
    "react": "16.5.0",
    "react-final-form": "^4.0.2",
    "react-final-form-arrays": "^2.0.1",
    "react-native": "0.56.0",
    "react-native-camera": "^1.1.4",
    "react-native-code-push": "^5.4.2",
    "react-native-gifted-chat": "^0.4.3",
    "react-native-icon-badge": "^1.1.3",
    "react-native-image-picker": "^0.26.10",
    "react-native-image-progress": "^1.1.1",
    "react-native-lightbox": "https://github.com/tranduchieu/react-native-lightbox.git",
    "react-native-onesignal": "^3.2.7",
    "react-native-phone-call": "^1.0.9",
    "react-native-progress": "^3.5.0",
    "react-native-qrcode-scanner": "^1.0.1",
    "react-native-qrcode-svg": "^5.1.0",
    "react-native-svg": "^6.5.2",
    "react-native-user-avatar": "^1.0.3",
    "react-native-view-shot": "^2.4.0",
    "react-navigation": "^2.6.2",
    "react-relay": "^2.0.0",
    "relay-runtime": "^2.0.0",
    "rn-fetch-blob": "^0.10.15",
    "styled-components": "^3.2.6",
    "subscriptions-transport-ws": "^0.9.7",
    "uuid": "^3.3.2",
    "varname": "^2.0.3",
    "youtube-search": "^1.1.4"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-jest": "22.4.3",
    "babel-plugin-relay": "^1.6.2",
    "babel-preset-react-native": "5.0.0",
    "eslint": "^4.1.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.34.1",
    "eslint-plugin-import": "^2.6.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0",
    "flow-bin": "0.75.0",
    "jest": "22.4.3",
    "prettier-eslint": "^8.8.1",
    "react-test-renderer": "16.3.1",
    "relay-compiler": "^2.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": ["react-native"],
  "retainLines": true,
  "plugins": ["relay"]
}

[sibelius]

You should also check which version of react-native is compatible with which version of react-native

check this diff here https://github.com/ncuillery/rn-diff/compare/rn-0.56.0...rn-0.57.2

you should try with react-native 0.57.2, instead of 0.56.0

[aquiseb]

I have the same issue with "react": "^16.7.0", "react-relay": "^2.0.0"

[vala]

Same here with react 16.7 and 16.8, tested with react-relay 2.0.0.rc2 and 2.0.0

[sibelius]

does this only happens on react-native?

we got this error here as well, but it was a cache of yarn

remove all node_modules and yarn cache and try to do a clean install

[artola]

@sibelius I got same error in a webapp while running jest.

    TypeError: Cannot read property 'readContext' of null

      at readContext (node_modules/react-relay/lib/readContext.js:20:21)

[sibelius]

only when running jest?

do you have a repro?

[artola]

I have react-relay and react-runtime @2.0.0, as before but might be a transitive dependency.

[sibelius]

try to run

yarn why react
yarn why react-dom
yarn why react-relay
yarn why relay-runtime
yarn why relay-compiler

make sure you don't have duplicated versions of any of them

[artola]

@sibelius My app compiles and run, but the tests break, even with a clean install. I would say that my yarn.lock is pointing to some package not working properly, because some colleague updated it today.
I will try to confirm.

[artola]

What I found is that the error is fired from node_modules/react-relay/lib/readContext.js L20

function readContext(Context) {
  var dispatcher = ReactCurrentDispatcher != null ? ReactCurrentDispatcher.current : ReactCurrentOwner.currentDispatcher;
  return dispatcher.readContext(Context);
}

if I change var dispatcher = ReactCurrentOwner.currentDispatcher; then same tests pass.

[artola]

@sibelius I have this error with [email protected] ... while updating to [email protected] it is OK

Could be that react-relay is using some api not supported/buggy (ReactCurrentDispatcher.current) while peerDependencies": "react": "^16.5.0" is required in the package?

[vala]

@sibelius thanks for the hints. Clearing caches / node_modules didn't work for me, but thanks to yarn why I found out that react-dom was still at 16.4.1. Upgrading it to 16.8.1 resolved the issue. hope others can resolve their issue this way too.

[nikhildaga]

Still facing this issue

[sibelius]

@nikhildaga have you solved your problem?

[nikhildaga]

yes @sibelius , not facing it anymore

[sibelius]

this could also happen if you have more than 1 react module

[jaburx]

Facing this on a monorepo only with the react-native package, react package works fine.

[sibelius]

Check all yours node_modules

[jaburx]

Fixed for me @sibelius

[jaburx]

I was facing this because i had 2 react being bundled by metro, but i still can't understand why, any idea?

[sibelius]

your metro.config.js is wrong

[stan-sack]

@sibelius I am getting this as well, but only in production builds of my nextjs webapp. I've checked and I don't have duplicated react. Both [email protected] and [email protected] are providing relay-runtime though but that shouldn't matter because relay-compiler is dev only right?

yarn why react
=> Found "[email protected]"
info Has been hoisted to "react"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "276KB"
info Disk size with unique dependencies: "464KB"
info Disk size with transitive dependencies: "552KB"
info Number of shared dependencies: 5

yarn why react-dom
=> Found "[email protected]"
info Has been hoisted to "react-dom"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "3.07MB"
info Disk size with unique dependencies: "3.46MB"
info Disk size with transitive dependencies: "3.54MB"
info Number of shared dependencies: 6

yarn why react-relay
=> Found "[email protected]"
info Has been hoisted to "react-relay"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "216KB"
info Disk size with unique dependencies: "2.71MB"
info Disk size with transitive dependencies: "11.53MB"
info Number of shared dependencies: 16

yarn why relay-runtime
=> Found "[email protected]"
info Reasons this module exists
   - "react-relay" depends on it
   - Hoisted from "react-relay#relay-runtime"
   - Hoisted from "relay-compiler#relay-runtime"
info Disk size without dependencies: "724KB"
info Disk size with unique dependencies: "2.48MB"
info Disk size with transitive dependencies: "11.3MB"
info Number of shared dependencies: 14

yarn why relay-compiler
=> Found "[email protected]"
info Has been hoisted to "relay-compiler"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "3.36MB"
info Disk size with unique dependencies: "12.92MB"
info Disk size with transitive dependencies: "38.49MB"
info Number of shared dependencies: 160

I'm not super sure about how to deal with this.

[sibelius]

How are you building the nextjs app?

[stan-sack]

Im using serverless: serverless package

[stan-sack]

@sibelius I have somehow fixed this issue but I don't know how.

[sibelius]

your bundler could be including 2 versions of react in the bundle

[stan-sack]

If i confirm that it was because of that i'll post here. thanks for your help!

[stomvi]

I seemed to solve this by linking the same build of react both into my_app and the developing build of relay.

As mentioned the error might be caused by having 2 react versions in the nextjs bundle.