Perform hasOwnProperty check in Relay Flight

We simulate JSON.stringify in this loop so we should do a has own check.
Otherwise we'll include things like constructor properties.

This will actually make things throw less even when it should.

packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js

@@ -90,6 +90,8 @@ export function processErrorChunk(
  };
 }
 
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function convertModelToJSON(
  request: Request,
  parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
@@ -107,12 +109,14 @@ function convertModelToJSON(
  } else {
  const jsonObj: {[key: string]: JSONValue} = {};
  for (const nextKey in json) {
- jsonObj[nextKey] = convertModelToJSON(
- request,
- json,
- nextKey,
- json[nextKey],
- );
+ if (hasOwnProperty.call(json, nextKey)) {
+ jsonObj[nextKey] = convertModelToJSON(
+ request,
+ json,
+ nextKey,
+ json[nextKey],
+ );
+ }
  }
  return jsonObj;
  }

packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js

@@ -222,4 +222,29 @@ describe('ReactFlightDOMRelay', () => {
  const model = readThrough(transport);
  expect(model).toEqual(14);
  });
+
+ it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
+ function Bar() {
+ }
+
+ function Foo() {
+ }
+ Foo.prototype = Object.create(Bar.prototype);
+ // This is enumerable which some polyfills do.
+ Foo.prototype.constructor = Foo;
+ Foo.prototype.method = function() {};
+
+ expect(() => {
+ const transport = [];
+ ReactDOMFlightRelayServer.render(
+ <input value={new Foo()} />,
+ transport,
+ );
+ readThrough(transport);
+ }).toErrorDev(
+ 'Only plain objects can be passed to client components from server components. ',
+ {withoutStack: true},
+ );
+ });
+
 });

packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js

@@ -90,6 +90,8 @@ export function processErrorChunk(
  };
 }
 
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function convertModelToJSON(
  request: Request,
  parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
@@ -107,12 +109,14 @@ function convertModelToJSON(
  } else {
  const jsonObj: {[key: string]: JSONValue} = {};
  for (const nextKey in json) {
- jsonObj[nextKey] = convertModelToJSON(
- request,
- json,
- nextKey,
- json[nextKey],
- );
+ if (hasOwnProperty.call(json, nextKey)) {
+ jsonObj[nextKey] = convertModelToJSON(
+ request,
+ json,
+ nextKey,
+ json[nextKey],
+ );
+ }
  }
  return jsonObj;
  }

packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js

@@ -124,4 +124,28 @@ describe('ReactFlightNativeRelay', () => {
  nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
  ).toMatchSnapshot();
  });
+
+ it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
+ function Bar() {
+ }
+
+ function Foo() {
+ }
+ Foo.prototype = Object.create(Bar.prototype);
+ // This is enumerable which some polyfills do.
+ Foo.prototype.constructor = Foo;
+ Foo.prototype.method = function() {};
+
+ expect(() => {
+ const transport = [];
+ ReactNativeFlightRelayServer.render(
+ <input value={new Foo()} />,
+ transport,
+ );
+ readThrough(transport);
+ }).toErrorDev(
+ 'Only plain objects can be passed to client components from server components. ',
+ {withoutStack: true},
+ );
+ });
 });