Onsen2: Dom mutations and using React

[jondavidjohn]

I've recently been trying to wire up the 2.0.0 alpha releases with React.

According to this blog post it seems fairly simple, but in using the ons-list and ons-list-item components it looks to throw some errors about the DOM being different than react expects it to be. I think this is due to the fact that the onsenui javascript does some DOM manipulation, adding divs, etc...

https://github.com/jondavidjohn/onsenui-react-error

This repository points out a few problems I'm having

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0.$list.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

And also attempting to reference the this.refs.navigator seems to not be working as I expect it to (as it does in the example blog post above). I wonder if the blog post is still relevant under more recent iterations of OnsenUI 2.0?

[argelius]

Hi @jondavidjohn !

Sorry for the late reply. It's true that the list tags will do some DOM manipulation when they are added since they are Web Components. However, I didn't have any trouble integrating them with React.

Would it be possible for you to create a simple example that reproduces this error?

[jondavidjohn]

@argelius I included a repository the triggers the error I point out in the issue 👆

[jondavidjohn]

@argelius Just thought I'd ping again, just in case you didn't see the example repository above.

[jondavidjohn]

Upgraded the example to the 2.0.0-beta and it's still an issue.

[argelius]

Thanks a lot @jondavidjohn ! I will take a look a this either today or tomorrow.

[jondavidjohn]

After a bit of poking around, I found that the Invariant error stops if you remove the onClick attributes from the list item.

[argelius]

I'm really sorry for being late. I was travelling last week so I wasn't able to do a lot of work.

Thanks a lot for your investigation. We will keep working on React support and we want Onsen UI 2.0 to play nicely with React when we release the stable version.

[jondavidjohn]

Just thought I'd update that I tested with beta.2 and it is still an issue. 👍

[c58]

We are discussing React/Preact compatibility with OnsenUI. There is an example of broken mutation of a DOM with onsen and react: https://github.com/developit/preact-webcomp-test