React-rails: ReactDOM.hydrate is not a function

[victorbojica]

Hi,

Just updated the package and i'm running into this:

index.js:93 Uncaught TypeError: ReactDOM.hydrate is not a function at Object.mountComponents (index.js:93) at HTMLDocument.ReactRailsUJS.handleMount (index.js:124) at HTMLDocument.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227) at HTMLDocument.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879) at Object.t.dispatch (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6) at r.t.Controller.r.notifyApplicationAfterRender (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:7) at r.t.Controller.r.viewRendered (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6) at n.t.Renderer.t.renderView (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6) at n.t.SnapshotRenderer.n.render (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6) at Function.t.Renderer.t.render (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6)

Probably related to #828

Thanks.

[BookOfGreg]

What version of React are you running? ReactDOM.hydrate is a function from v16.
yarn upgrade react react-dom should fix that right up for you 👍 Let me know how it goes.

[xinranxiao]

@victorbojica make sure your package.json has this specific version for react_usj: "react_ujs": "2.4.0" (as opposed to something like "react_ujs": "^2.4.0").

828 bumped the patch version and now requires React v16.xx. It's not backwards compatible and will break anyone with ^2.x.x who's not on React v16.x. @BookOfGreg I'd recommend rolling back that change with 2.4.2 and then bumping maybe the major version for the change? Not sure what's the best way to set a hard v16.xx requirement

[BookOfGreg]

@xinranxiao Good point, the 2.4.0 change will have not been backward compatible for sprockets users in the Gem (and I even listed it as so in the Changelog) and the UJS is definitely is not backward compatible as it uses without testing for existence of hydrate.

I must take a moment to apologise for moving too quickly.

@rmosolgo I'd like your input to this issue as me rushing is what got us here, so me rushing to fix isn't wise either.

I could release a react_UJS node package 2.4.2 that checks for hydrate and uses render if hydrate is not defined, that lets us get passed the UJS backward compatibility hurdle no bother.

There's also the gem itself that is backwards incompatible only for Sprockets users that are using the pre-bundled react, as it forces a React 16 upgrade. Webpacker users and sprockets not pre-bundling have their own React so dodge the issue. I could backport fixes to 2.3-stable branch and release that as gem 2.4.2and then release 2.4.1 as 3.0.

The reason I didn't want to release as 3.0 as it seemed like a big leap for the work I was doing, and only affected a subset of users, though the gem is mature enough that I shouldn't be releasing so quickly as I have been doing.

Thoughts please?

[rmosolgo]

Sorry I'm late on the ping here!

Oh, I see -- the react_ujs now depends on React 16, is that right?

I could release a react_UJS node package 2.4.2 that checks for hydrate and uses render if hydrate is not defined

This seems perfect, are there any drawbacks to it? (A patch version seems right to me -- we're fixing a backwards compat scenario.)

As for Sprockets, I _think_ a corresponding Gem release will solve the problem there. If they have their own React bundled in, and it's less than 16, they'll be ok, because the UJS will choose render instead of hydrate, right?

[BookOfGreg]

As for Sprockets, I think a corresponding Gem release will solve the problem there. If they have their own React bundled in, and it's less than 16, they'll be ok, because the UJS will choose render instead of hydrate, right?

Ah good point. Yes correcting the UJS will fix it for that set of users.

For people on sprockets using the bundled react, I've effectively forced an incompatible upgrade from React 15 to 16, should I release a 3.0 to the gem for that or is that a small enough subset to pass over? They would definitely need to handle PropTypes and CreateReactClass.

I'll go ahead and work on the 2.4.2 for the UJS for now, thanks for your thoughts.

[rmosolgo]

IMO no need for a major version change, other React versions were also incremented on minor versions:

• React 15 in 1.7.0
• React 14 in 1.4.0