Relay: Relay 2.0.0-rc.1 incompatibility w some React 16.6.x versions

Created on 5 Nov 2018 · 10Comments · Source: facebook/relay

Hello Relay team. First off, thanks for all the hard work you've all put in on this project - it's very much appreciated by my team and me.

The problem

I've recently tried upgrading to relay 2.0.0-rc.1 and have run into an odd issue when passing null as a fragment value. See the error output at the bottom. Note that this was working in 1.7.x. It's unclear to me if nullable fragments were never intended to work, or if this is a bug (can't find any info on it in the docs).

My specific use-case is trying to account for fragment data that may still be loading. I'm wondering if the new SuspenseFragmentContainer is supposed to address this use-case? Any information regarding the usage of SuspenseFragmentContainer would be much appreciated.

Repro

Create a fragment container using createFragmentContainer
Pass in a null value as the prop for the fragment

Example code

UserAvatar.js

const UserAvatar = ({ user }) => (
  user ? <img src={user.avatar} /> : <span />
);

export default createFragmentContainer(UserAvatar, {
  user: graphql`
    fragment UserAvatar_user on User {
      id
      avatar
    }
  `
});

Some other component:

  <UserAvatar user={null} />

Error output

buildReactRelayContainer.js:58 Uncaught TypeError: __webpack_require__(...).unstable_read is not a function
    at forwardRef (buildReactRelayContainer.js:58)
    at updateForwardRef (react-dom.development.js:13551)
    at beginWork (react-dom.development.js:14506)
    at performUnitOfWork (react-dom.development.js:17014)
    at workLoop (react-dom.development.js:17054)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:16366)
    at renderRoot (react-dom.development.js:17148)

react-dom.development.js:15123 The above error occurred in the <ForwardRef(Relay(UserAvatar))> component:
    in div (created by Grid)
    in div (created by Grid)
    in div (created by Grid)
    in div (created by Grid)
    in Grid (created by Table)
    in div (created by Table)
    in Table (created by AutoSizer)
    in div (created by Context.Consumer)
    in StyledComponent (created by VirtualizedTable__Wrapper)
    in div (created by AutoSizer)
    in AutoSizer (created by VirtualizedTable)
    in VirtualizedTable (created by _default)
    in _default (created by ReactRelayQueryRenderer)
    in div (created by Context.Consumer)
    in StyledComponent (created by Page__ContentWrapper)
    in div (created by Context.Consumer)
    in StyledComponent (created by Page__InnerWrapper)
    in div (created by Context.Consumer)
    in StyledComponent (created by Page__Wrapper)
    in ReactRelayQueryRenderer (created by Component)
    in Component (created by Connect(Component))
    in Connect(Component) (created by ReactRelayQueryRenderer)
    in ReactRelayQueryRenderer (created by Jobs)
    in Jobs (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in div (created by Context.Consumer)
    in StyledComponent (created by Main__Wrapper)
    in ReactRelayQueryRenderer (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithMergedOptions(NamespacesConsumerComponent) (created by Main)
    in Main (created by Connect(Main))
    in Connect(Main) (created by Route)
    in Route (created by withRouter(Connect(Main)))
    in withRouter(Connect(Main)) (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in Provider (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

Environment

    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-hot-loader": "^4.3.12",
    "react-relay": "^2.0.0-rc.1",
    "react-router-dom": "^4.3.1",
    "relay-runtime": "^2.0.0-rc.1",
    "babel-plugin-relay": "^2.0.0-rc.1",
    "relay-compiler": "^2.0.0-rc.1",
    "webpack": "^4.24.0",

fixready

Source

richardgirges

Most helpful comment

It’s no longer happening on relay 2.0.0 and react 16.8.1.

Tested with relay 3.0.0 as well, things are looking good!

richardgirges on 26 Feb 2019

👍3

All 10 comments

I think relay 2.0.0-rc.1 is not compatible with react 16.6

try to use this version instead https://github.com/facebook/relay/commit/6caf96dd25462282fa0644704973e0fb2887c798

16.6.0-alpha.8af6728

sibelius on 5 Nov 2018

@sibelius upgrading to react 16.6.0-alpha.8af6728 worked! Thanks!!

richardgirges on 5 Nov 2018

changed react and react-dom version to 16.6.0-alpha.8af6728, the

TypeError: ReactRelayContext.unstable_read is not a function
    at Object.<anonymous> (/app/node_modules/react-relay/lib/ReactRelayContext.js:15:52)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.forwardRef [as render] (/app/node_modules/react-relay/lib/buildReactRelayContainer.js:58:19)
    at ReactDOMServerRenderer.render (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3203:44)
    at ReactDOMServerRenderer.read (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3057:29)
    at renderToString (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3524:27)
    at Object.renderPage (/app/node_modules/next/dist/server/render.js:319:26)
    at Function.getInitialProps (/app/.next/server/static/development/pages/_document.js:260:22)
    at _callee$ (/app/node_modules/next/dist/lib/utils.js:86:30)
    at tryCatch (/app/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:62:40)

has been fixed, but now I have another error

{ Invariant Violation: Context.unstable_read(): Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.
    at invariant (/app/node_modules/react/cjs/react.development.js:86:15)
    at readContext (/app/node_modules/react/cjs/react.development.js:1264:28)
    at Object.<anonymous> (/app/node_modules/react-relay/lib/ReactRelayContext.js:15:52)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.forwardRef [as render] (/app/node_modules/react-relay/lib/buildReactRelayContainer.js:58:19)
    at ReactDOMServerRenderer.render (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2784:56)
    at ReactDOMServerRenderer.read (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2669:23)
    at renderToString (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3060:25)
    at renderPage (/app/node_modules/next/dist/server/render.js:319:26)
    at Function.getInitialProps (/app/node_modules/next/dist/server/document.js:65:25) name: 'Invariant Violation', framesToPop: 1 }

"react": "16.6.0-alpha.8af6728",
"react-dom": "16.6.0-alpha.8af6728",
"react-relay": "2.0.0-rc.1",
"relay-runtime": "2.0.0-rc.1",
"babel-plugin-relay": "2.0.0-rc.1",
"relay-compiler": "2.0.0-rc.1"

@sibelius any help?

srghma on 17 Dec 2018

reverted relay to 1.7.0 as temporary solution

srghma on 17 Dec 2018

@srghma try to use latest version of React

React 16.7.0

sibelius on 21 Dec 2018

@sibelius upgrading to React 16.7.0 doesn't seem to work. Getting the same error. I've had to stay at React 16.6.0-alpha.8af6728 in order to keep using Relay 2.0.0-rc.1

richardgirges on 28 Dec 2018

👍1

I think relay 2.0.0-rc.1 is not compatible with react 16.6

@sibelius, why do you say this is the case?

@richardgirges yeah, this is due to a change in the React Context api, the issue has been fixed on master and should be included in the latest release

jstejada on 2 Jan 2019

@jstejada From what I understand the 2.0.0-rc.1 release was done before the change to the React Context api so using a newer version of react breaks when using 2.0.0-rc.1, cutting a new release should fix it.