react-native: Importing Poly (babel-polyfill,core.js symbol,es6-symbol) Crashes app on load - Objects are not valid as React child

There might be something to learn from this issue even if it is not the same maybe its a similar loading issue? https://github.com/facebook/react-native/pull/15182

I tried to use Symbol in my local project but none of the poly’s I found work they all crash RN when I try to run even the simplest app with Objects are not valid as React child reconcileChIldFibers throws InvalidObjectType line 8348:31 (ReactNativeRenderer - dev.js)

Environment

Environment: OS: Linux 4.15 Node: 8.10.0 Yarn: 1.5.1 npm: 5.6.0 Watchman: Not Found Xcode: N/A Android Studio: Not Found

Packages: (wanted => installed) react: ^16.3.0-alpha.1 => 16.3.0-alpha.3 react-native: 0.54.2 => 0.54.2

Steps to Reproduce

react-native init rnsymboleish cd rnsymboleish npm install --save babel-polyfill (or npm install --save es6-symbol) npm install

—App.js

import 'babel-polyfill';   //---> or //'es6-symbol/implement' //'core-js/es6/symbol';
import React, { Component } from 'react';
import { Text, View} from 'react-native';
  
export default class App extends Component {
  render() {
    return (
      <View>
        <Text>
          Eish
        </Text>
      </View>
    );
  }
}

react-native run-android

Expected Behavior

Thought it would not crash…?

Actual Behavior

3-24 19:14:45.728 30769 31013 I ReactNativeJS: Running application “rnsymbolwtf” with appParams: {“rootTag”:1}. DEV === true, development-level warning are ON, performance optimizations are OFF 03-24 19:14:45.748 30769 31013 E ReactNativeJS: Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead. 03-24 19:14:45.748 30769 31013 E ReactNativeJS: 03-24 19:14:45.748 30769 31013 E ReactNativeJS: This error is located at: 03-24 19:14:45.818 30769 31013 E ReactNativeJS: Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead. 03-24 19:14:45.818 30769 31013 E ReactNativeJS: 03-24 19:14:45.818 30769 31013 E ReactNativeJS: This error is located at:

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 26 (7 by maintainers)

Most upvoted comments

Moving import 'core-js/es6/symbol'; to the top of index.js solved the problem for me.

It seems like there are enough workarounds for this to consider the issue resolved.

I have the same issue since I migrated to RN 0.57.

Adding import 'core-js' in the index.js file of the project, at line 1, solved the error.

Why adding this import is solving this error?

@ronhe, moving it to the top of the file did not work for me, unfortunately 😦