question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReactDOM.hydrate is not a function

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
rmosolgocommented, Nov 13, 2017

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

1reaction
BookOfGregcommented, Nov 7, 2017

@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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why do ReactDOMServer and ReactDOM give the "root ...
Why do ReactDOMServer and ReactDOM give the "root.hydrate is not a function" error · What version of React are you using? – PR7....
Read more >
Uncaught TypeError: ReactDOM.hydrate is not a function
ReactJs.net Server Side Rendering throws exception - Uncaught TypeError: ReactDOM.hydrate is not a function.
Read more >
hydrate - React Docs
hydrate lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server in React 17 and...
Read more >
Understanding Hydration in React applications(SSR)
Hydration is used only with server-side rendering (SSR). It is a process of rendering our components and attaching event handlers.
Read more >
Difference Between Hydration and Rendering in React
The container node is not changed by ReactDOM.render() (only ... The hydrate() function is implemented while using server-side rendering.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found