react-native iterator typeof Symbol error

Question

TypeError: undefined is not a function (evaluating 'iteratortypeof Symbol === "function"? Symbol.iterator : "@@iterator"')

I didnt write too many lines of code yet. I just imported router-flux and redux (and things about redux). App is working on iOS with zero problem. Also working on android but only with debug mode. I couldn't solve it.

Here's my package.json file;

{
  "name": "newProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "firebase": "^5.3.0",
    "lodash": "^4.17.10",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-router-flux": "^4.0.0-beta.31",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "^5",
    "jest": "23.4.1",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

And this is the first page that App renders;

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';

class Main extends Component {
  componentWillMount() {
      const firebase = require('firebase');
    firebase.initializeApp({
        apiKey: "AIzaSyDFO_Rfas36L8R8p6qxTvCr843ajeamoMs",
        authDomain: "helloworld-e510b.firebaseapp.com",
        databaseURL: "https://helloworld-e510b.firebaseio.com",
        projectId: "helloworld-e510b",
        storageBucket: "helloworld-e510b.appspot.com",
        messagingSenderId: "316625723749"
  });
  }
  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

export default Main;

And lastly this is router page;

import React from 'react';
import { Scene, Router, Actions } from 'react-native-router-flux';
import MainPage from './components/MainPage';

const RouterComponent = () => {
    return (
      <Router>
      <Scene key="main">
        <Scene key="mainPage" title="Giriş" component={MainPage} />
      </Scene>
      </Router>
    );
};

export default RouterComponent;

I searched at github and here but i couldn't find a good enough solution. I hope someone can help.

Answer 1

I came across this issue and the below solution worked. Paste the below lines in your app.js file in react native project.

// symbol polyfills
global.Symbol = require('core-js/es6/symbol');
require('core-js/fn/symbol/iterator');

// collection fn polyfills
require('core-js/fn/map');
require('core-js/fn/set');
require('core-js/fn/array/find');

for more information refer the below issue https://github.com/facebook/react-native/issues/15902#issuecomment-375521246

Answer 2

I ran into this issue and had a different solution. I was doing a for-of loop and it turned out the array I was looping through was sometimes null.

let matched = input.match(regex);
for (let m of matched) {
    // ...
}

I didn't realize String.prototype.match() returns null if no matches are found. I had assumed it would just return an empty array. The error I received didn't point me in this direction at all, but once I realized this mistake, it solved the problem.