Collision between two React copies running on the same DOM (ReactMount: Two valid but unequal nodes with the same data-reactid: .0.0.2)

[chandlerprall]

I'm working on a Chrome extension that injects data into the current page. Chrome extensions have a concept of a "content script" which has access to the page's DOM but not any of the page's JavaScript variables. This means I can include React for that page's DOM but there may already be React running on the page, and there won't be any conflicts in the code. However, with two copies of React running I ran into Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the samedata-reactid: .0.0.2 for obvious reasons.

My solution was to modify my extension's version of React to change DOMProperty.ID_ATTRIBUTE_NAME to data-extensionreactid to avoid these conflicts. Is there a better way than modifying React's source?

[zpao]

At this point no there is no better way. I don't think we'd really considered this case. It's a known issue that using multiple copies of React on a page will cause problems but our typical answer of "don't do that" doesn't really apply here.

I think there are a couple longer-term possibilities. The first is to remove the use of that attribute entirely and not stick ids in the page. The other is to generate a random prefix for the attribute (or the values) at startup. That's essentially what you did. That way each runtime would be mostly isolated.

cc @sebmarkbage @syranide who have talked about some of these things before

[gaearon]

It would be nice to get rid of data-react-id if this is possible at all. I've seen some newcomers turned away by this for some aesthetic reasons. Not that it's really important.

[syranide]

@gaearon I have a PR up for exactly that, but it's somewhat thrasing and the devs prefer to know the full story (there are many different ways it can be done and some may be faster than others), also React has a few currently irrelevant bugs which my PR trips on bad. But I definitely see that it is very much possible and seemingly even preferable from a performance perspective.

#1570

[syranide]

I should also mention that a simple workaround that does not involve building your own version is to just exec require('react/DOMProperty').ID_ATTRIBUTE_NAME = 'data-reactid-x' unless you're using a prebuilt package.

[chandlerprall]

Thanks for the responses & info. Closing as nothing else is pending for me :)

[FBerthelot]

@syranide I have exactly the same issue, but i can't implement your solution in my code.
I try to exec the following code before require react/addons itself, but there is no changes

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

I've also tried to directly change the node_modules/react/addons.js file and make it look like that :

require('./lib/DOMProperty').ID_ATTRIBUTE_NAME = 'data-reactid-nf';
module.exports = require('./lib/ReactWithAddons');

And this just works fine.

So my final question is : is there a solution to change react attribute name inside my own code ?

Many thanks.

[azproduction]

@FBerthelot if you are using webpack Hot Loader it could brake things. Basically you should take ID_ATTRIBUTE_NAME-magic out of first jsx file in order to apply patch.

// bootstrap.js
require('react/lib/DOMProperty').ID_ATTRIBUTE_NAME = 'data-reactid-nf';
require('./main.jsx');

[FBerthelot]

Thanks @azproduction but unfortunatly, i don't use webpack hot loader. By the way, I didn't know this tool. It seem fun, i will try it a day ;)

Personnaly i did that awful quick fix in my jenkins build:

if (! grep -q data-reactid-nf "./node_modules/react/addons.js"); then
     sed -i '1irequire("./lib/DOMProperty").ID_ATTRIBUTE_NAME = "data-reactid-nf";' ./node_modules/react/addons.js
fi

When i will more time, i will change all require('react/addons'); by my custom implementation of react, but i still find this ugly. Less ugly but still ugly.

[calbertts]

Due to this issue wasn't able to use dropzone.js as a plugin because I can't create new elements without that fucking KEY.

Sorry, but I think that this isn't a good approach, please!.. get ride of it.
My love is dying...

[Feawel]

Go the same error while trying to add Zendesk widget :/