close

[Solved] TypeError: Invalid attempt to spread non-iterable instance

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error TypeError: Invalid attempt to spread non-iterable instance in react-native. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How TypeError: Invalid attempt to spread non-iterable instance Error Occurs?

After compiling to android and downloading via Store I get the error:

"TypeError: Invalid attempt to spread non-iterable instance"

How To Solve TypeError: Invalid attempt to spread non-iterable instance Error?

  1. How To Solve TypeError: Invalid attempt to spread non-iterable instance Error?

    To Solve TypeError: Invalid attempt to spread non-iterable instance Error This is because it is a runtime error, not a “compile-time” error. Is there a line number associated with the error? Based on the question being about the spread operator I'll assume it's this line: newArticlesData=[…prevData,…response.data]. I assume your prevData is iterable, but is your response data? Try newArticlesData=[…prevData, response.data]?

  2. TypeError: Invalid attempt to spread non-iterable instance

    To Solve TypeError: Invalid attempt to spread non-iterable instance Error This is because it is a runtime error, not a “compile-time” error. Is there a line number associated with the error? Based on the question being about the spread operator I'll assume it's this line: newArticlesData=[…prevData,…response.data]. I assume your prevData is iterable, but is your response data? Try newArticlesData=[…prevData, response.data]?

Solution 1

This is because it is a runtime error, not a “compile-time” error. Is there a line number associated with the error? Based on the question being about the spread operator I’ll assume it’s this line: newArticlesData=[...prevData,...response.data]. I assume your prevData is iterable, but is your response data? Try newArticlesData=[...prevData, response.data]?

Here’s an example of invalid spread operator use:

function trySpread(object) {
  let array;
  try {
    array = [...object];
    console.log('No error', array);
  } catch(error) {
    console.log('error', error);
  }
}

// error
trySpread({});
trySpread({foo: 'bar'});
trySpread(4);

// no error
trySpread([]);
trySpread(['foobar']);
trySpread('foobar');

Solution 2

getting this crash in release android build only. release ios build and android debug build working perfectly.

After spending a few hours found solutions from the internet.

edit your .babelrc and add following into your plugins

[
      "@babel/plugin-transform-spread",
      {
        "loose": true
      }
    ]

so Here is my .babelrc file

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "syntax-trailing-function-commas",
    "@babel/plugin-transform-flow-strip-types",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-transform-spread",
      {
        "loose": true
      }
    ]
  ],
  "sourceMaps": true
}

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment