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

[Harag]

• [x] I have reviewed the documentation
• [x] I have searched existing issues

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

• [x] I am using the latest React Native version

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:

[kelset]

Why are you writing

<--View-->
        <--Text-->
          Eish
        <--/Text-->
      <--/View-->

Instead of

      <View>
        <Text>
          Eish
        </Text>
      </View>

[Harag]

@kelset sorry the code that looked like html tags was disappearing even with a pre tag and I did a quick hack just to get it to display. I see now that you use <pre><code>combination... will try that to prevent confusion going forward

[kelset]

Does it mean that now it works for you? If so, can you please close the issue?

[Harag]

@kelset NO it does not work the funny code was github issue tracker giving me issues displaying code in comments the funny code has nothing to do with the actual error.

[Harag]

Edited the original comment to clear up any confusion.

[ronhe]

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

[ujwal-setlur]

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

[ujwal-setlur]

By the way, this was working for me up until react-native 0.55.4. With rn-0.56.0, I see this problem.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[zedtux]

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?

[FibreFoX]

@zedtux OMG thanks so much !!! After spending at least two days debugging my application to the latest RN version, you safed me with that code!

I was suspecting react-native-firebase because of this issue looking close enough: https://github.com/invertase/react-native-firebase/issues/1438

Adding import 'core-js/es6/symbol'; only did not work for me, but adding import 'core-js'; made the trick ... probably because Symbol was not working as expected and maybe because another polyfill is required. This even is mentioned here: https://github.com/facebook/react-native/issues/15902#issuecomment-396963357

While "debugging" the app it works like a charm, which even got mentioned in a different project: https://github.com/realm/realm-js/issues/1883 even there an JSC-upgrade was mentioned.

[sayali181290]

@zedtux : This solution gives me an error as follows :

Unable to resolve module ./$.html from /Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/core-js/modules/es5.js: The module ./$.html could not be found from /Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/core-js/modules/es5.js. Indeed, none of these files exist:

• $.html
• /Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/core-js/modules/$.html/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

Error: Unable to resolve module ./$.html from /Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/core-js/modules/es5.js: The module ./$.html could not be found from /Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/core-js/modules/es5.js. Indeed, none of these files exist:

• $.html
• /Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/core-js/modules/$.html/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  at ModuleResolver.resolveDependency (/Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:697)
  at ResolutionRequest.resolveDependency (/Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
  at DependencyGraph.resolveDependency (/Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
  at Object.resolve (/Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/lib/transformHelpers.js:180:25)
  at dependencies.map.result (/Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
  at Array.map ()
  at resolveDependencies (/Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
  at /Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
  at Generator.next ()
  at step (/Users/sayalideshpande/Documents/Projects/KOA/KOA Conference App/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:bundleReleaseJsAndAssets'.

  Process 'command 'node'' finished with non-zero exit value 1

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 19s
35 actionable tasks: 1 executed, 34 up-to-date

[zedtux]

@sayali181290 what RN version are you using?

[sayali181290]

0.57

[zedtux]

I'm using this version too, it should come from one of your dependencies. Can you please post your package.json file?

[sayali181290]

Yes. Sure.

{
"name": "KOA",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"firebase": "^4.9.1",
"rc-swipeout": "^2.0.11",
"react": "16.5.0",
"react-native": "0.57.1",
"react-native-actionsheet": "^2.4.2",
"react-native-dropdownalert": "^3.7.0",
"react-native-elements": "^0.19.1",
"react-native-gridview": "^0.1.2",
"react-native-image-picker": "^0.26.10",
"react-native-keyboard-aware-scroll-view": "^0.7.4",
"react-native-material-dropdown": "^0.11.1",
"react-native-material-textfield": "^0.12.0",
"react-native-modal-dropdown": "^0.6.2",
"react-native-pages": "^0.7.0",
"react-native-qrcode": "^0.2.7",
"react-native-segmented-control-tab": "^3.3.1",
"react-native-snap-carousel": "^3.7.5",
"react-native-super-grid": "^2.4.3",
"react-native-swipe-list-view": "^1.3.1",
"react-native-tag-input": "0.0.21",
"react-native-tag-select": "^2.0.0",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.16.0",
"rn-fetch-blob": "^0.10.13"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.46.0",
"path": "^0.12.7",
"react-test-renderer": "16.5.0",
"ws": "3.3.2"
},
"jest": {
"preset": "react-native"
}
}

[sayali181290]

Please share if anyone having any solution for this

[FibreFoX]

@sayali181290 instead of adding polyfills, and as this is android-specific, I went over to add the JSC-android I mentioned above:

1. adding to your project-dependencies
   ```sh
   yarn add --dev jsc-android

2. modify your `android/build.gradle` file
```groovy
allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }

        // for replacing the older JavaScriptCore which is bundled with RN (they use r174650)
        maven {
            // Local Maven repo containing AARs with JSC library built for Android
            url "$rootDir/../node_modules/jsc-android/dist"
        }
    }
}

1. modify your android/app/build.gradle file (I added it below the dependencies-block)

configurations.all {
    resolutionStrategy {
        eachDependency { DependencyResolveDetails details ->
            if (details.requested.name == 'android-jsc') {
                details.useTarget group: details.requested.group, name: 'android-jsc-intl', version: 'r225067'
            }
        }
    }
}

Note on step 3: you should make sure that the version matches the folder below /node_modules/jsc-android/dist/org/webkit/android-jsc-intl/ in order to match the maven-repository file-structure.

Note in general: this is a workaround and replaces the used JavaScriptCore which comes with RN itself. It will increase your filesyse of the created APK-files (like mentioned on the android-jsc project)

[ManishAhire]

@FibreFoX I tried the above solution but not working

[FibreFoX]

@ManishAhire Did you remove the import of core-js ? I can't remember if I had that included AND having the newer core... maybe they are conflicting each-other

[ronhe]

I'm not sure why, or if it's better than just adding all of core-js polyfills as @zedtux suggested, but adding the map polyfill import before the symbol one also works for me on [email protected] + Android API 26.

import 'core-js/es6/map';
import 'core-js/es6/symbol';

[cpojer]

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

[FibreFoX]

@cpojer so instead of fixing a hole in the wall, you just say, we shouldn't look there? As this is an issue with the bundled polyfills required due to some older JSC, maybe with upcoming releases of the new JSC this issue gets resolved (which are getting into RN with 0.59 maybe?).

Can we please re-open this issue until it gets verified to work with the new JSC, or with adjusted polyfills?

[cpojer]

React Native is not shipping with a Symbol polyfill right now and we aren't going to. You are right, with a new version of JSC the Symbol polyfill will be available and this problem should go away. It will be in the next version.

[Lucashuang0802]

any news on this issue? it has been blocking me from upgrading react-native from 0.56 to 0.57.8

[RatherLogical]

I fixed this issue by updating core-js to the latest stable and changing my polyfills.ts to this.

import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int.js';
import 'core-js/es/parse-float.js';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';

Here's the error I was getting.