Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

Textfield with react-router cause "Invariant Violation" Error #6

Closed
eisneim opened this issue Aug 13, 2015 · 4 comments
Closed

Textfield with react-router cause "Invariant Violation" Error #6

eisneim opened this issue Aug 13, 2015 · 4 comments

Comments

@eisneim
Copy link

eisneim commented Aug 13, 2015

a page contains Textfield and when hit a link change the route, it will throw this Error:

Uncaught Error: Invariant Violation: ReactMount: Root element ID differed from reactRootID.

the problem is in react's ReactMount.js: 631 findReactContainerForID(id)

var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id);
 var container = containersByReactRootID[reactRootID];
 if ("production" !== process.env.NODE_ENV) {
      var rootElement = rootElementsByReactRootID[reactRootID];
      if (rootElement && rootElement.parentNode !== container) {
 /*
the problem is here:
container == <body>
rootElement === <div class="mdl-layout__container">
rootElement.parentNode === null, but why ???? it should be the <body>


*/
@tleunen
Copy link
Owner

tleunen commented Aug 15, 2015

I never experienced this error with the textfield component. Only with the layout.
And based on your log, it seems you're also using the layout component. (from react-mdl or not, it doesn't really matter I think). But it's causing some issues that I described here (google/material-design-lite#1356). I submitted a fix but it cannot be merged before the next major version.

You can easily get my fix and build new js/css material files. I'm also thinking of providing them inside this repo until a proper fix is done in MDL.

@eisneim
Copy link
Author

eisneim commented Aug 17, 2015

thanks so much!

@tleunen
Copy link
Owner

tleunen commented Aug 20, 2015

If you want to use the Layout component, I suggests you use my custom material.js and material.css files.

The demos in this repository use these files for example.

This is based on the latest version of MDL (1.0.4 when writing this post).

@tleunen tleunen closed this as completed Aug 20, 2015
@eisneim
Copy link
Author

eisneim commented Aug 22, 2015

thanks, i'm gonna try it

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tleunen @eisneim