Preact and Relay

[yasserkaddour]

Hi,
I just tried to switch to preact on my relay project using preact-compat, it's compile but I have this error on the console.

GraphQLStoreChangeEmitter.js:82Uncaught TypeError: this._batchUpdate is not a function
at e._processBroadcasts (http://localhost:9000/assets/app.js:31:3416)
at http://localhost:9000/assets/app.js:31:3104
at i (http://localhost:9000/assets/app.js:10:19989)
at http://localhost:9000/assets/app.js:10:20732
at MutationObserver.r (http://localhost:9000/assets/app.js:13:20214)
e._processBroadcasts @ GraphQLStoreChangeEmitter.js:82
(anonymous function) @ GraphQLStoreChangeEmitter.js:63
i @ core.js:37
(anonymous function) @ core.js:123
r @ browser-raw.js:52

I think preact is awesome, I reduced my gzip bundle from 160k to 124k with it, it's just to bad it's doesn't work. Is there something you can do about it?

Thanks

[developit]

Hi Yasser - sorry I didn't reply to this earlier. Do you have an example that you started from or anything? I've not used Relay (though I'm extremely interested in it) so it's a little hard to reproduce.

[yasserkaddour]

Hi Jason, Thank you for considering working on Relay ;)
I added preact to the relay-starter-kit repo here https://github.com/YasserKaddour/relay-starter-kit-preact
I got the same error message as in my relay project, I hope this will help, thank you

[developit]

Awesome, I'll take a look when I get a little bit of spare time!

[twhid]

I poked around at this a bit and it looks like Relay (here) is relying on react-dom to have a property called unstable_batchedUpdates. This function is what is what is assigned to that property.

It would seem that preact-compat would need to implement this in order to support using preact with Relay. I'm new to both Relay and the innards of React and have no clue how to fix this, but thought the leg work in tracking it down might be helpful.

I'm also interested as it reduces a vendor bundle gzipped by almost 40% (148 -> 93k).

[sjchmiela]

Any progress on that? I think Relay compatibility would really push Preact forward, as it's a pretty common pattern to use React with Relay. :)

[developit]

Agreed, though I've not yet had time to fix this. If someone has a few spare cycles, it seems like we could just use a shim function that immediately invokes its first argument:

function unstable_batchedUpdates(callback) {
  callback();
}

... and just export it at the bottom of the library.

[sjchmiela]

Created a pull request preactjs/preact-compat#289, unfortunately it only helped with the error, nothing renders. Any ideas?

[nickhudkins]

@sjchmiela am running into this now, it looks like it may take a little more than just calling callback(), I'm going to spend a little bit of time seeing if I can figure out how to get this to work.

https://github.com/facebook/react/blob/7dc5f91d886fcfd5bd9db40449370ce5d88ea188/src/renderers/shared/stack/reconciler/ReactUpdates.js#L94-L97

[nickhudkins]

Oh boy. Not sure what I have gotten myself into 👍

[nickhudkins]

hey @sjchmiela are you also using React Router in your project? Tracing through this, it looks like @developit was correct in suggesting that we simply need to call callback() but it gets hung up further down the render chain. Still digging as I have time.

[nickhudkins]

More importantly, @sjchmiela if you can check if "blank" means that <undefined></undefined> is being rendered to the DOM, I can at least know that my blank screen and your blank screen are likely the same issue 👍 it looks like this was a problem in the past with React Router. From what I can tell, createElement is disappearing :(