React data attributes conflicting with existing react components

[nelix]

I am using react-frame-component from a chrome extension content script, if I load it into a page that is already using react I get this error:
Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0.0
is there a way to work around this?

[nelix]

In case anyone else ever comes across this, the way I solved this issues is with this hack:

require('react/lib/DOMProperty').ID_ATTRIBUTE_NAME = 'data-myproductid';

If you do this before requiring react and you use a module loader like webpack (I assume browserify is much the same?) this should work.

You can also just search and replace your react lib or app bundle.

[ryanseddon]

@nelix apologies for missing this I'm not sure how I did! I've asked some react people to comment on this and see if there is a better solution.

[nelix]

I got the solution from the react irc channel, from @syranide

[ryanseddon]

Ah ok I'll leave this open and see if anyone has any other solutions. I'll close it off tomorrow if not.

[ryanseddon]

This seems to be related facebook/react#1939

[nelix]

should we add comments about the id name spacing to the readme?

[KelWill]

nelix thanks for the hack -- worked perfectly!

@ryanseddon -- any chance we could add that line of code to react-frame-component? It seems like the default should be for it to have a different data-reactid than the normal one so that anything in an iframe doesn't conflict with a regular react project.

[ryanseddon]

I'm not sure that should be part of this library, it should definitely be added to the readme. Wanna do a PR?

[ryanseddon]

This is fixed via #22