Unhandled JS Exception when one of the item in object is a React-Native element

[alexmngn]

I have 2 objects I'd like to deep merge. One element in the object is a React-Native element.

First object:

const obj1 = {
  headerStyle: {
    color: 'blue',
  },
  headerLeft: (
    <Text>Back</Text>
  )
};

const obj2 = {
  headerStyle: {
    backgroundColor: 'red',
  },
  headerLeft: (
    <Text>Close</Text>
  )
}

merge(obj1, obj2);

I get the following error when I try to merge those 2 objects:

Unhandled JS Exception: Maximum call stack size exceeded

[TehShrike]

I'm guessing that the React/React Native objects have cycles somewhere in their properties.

I assume that you are expecting the React Native objects to not be merged?

Can you find out if there's a canonical way to detect the React Native object type? If so, we can add it to is-mergeable-object, which would fix the issue in your case.

[alexmngn]

@TehShrike I'm not expecting to merge the React Native objects but to get the last one indeed.
I cannot find a way to distinguish a React element of a React Native element

Both objects are quite similar:

ReactJS:

React Native:

One has a defined _source_ but this doesn't seem to be accessible via code.

Although I would think the same rule should apply and we shouldn't merge ReactJS element either.

We can create a check for $$typeof === Symbol(react.element)

[TehShrike]

Yeah, this looks relevant: https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L375-L381

[TehShrike]

Check over TehShrike/is-mergeable-object#1

[TehShrike]

Any thoughts @alexmngn?

[macdja38]

It would be interesting to support merging circular references since in theory it would be possible.

[alexmngn]

@TehShrike Looks good to me 👍

[TehShrike]

Published as 1.5.2.