Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Invalid attempt to spread non-iterable instance [occurs only iOS Safari] #10509

Open
rzubrycki opened this issue Sep 30, 2019 · 5 comments

Comments

@rzubrycki
Copy link

commented Sep 30, 2019

馃悰 bug report

馃帥 Configuration (.babelrc, package.json, cli command)

package.json
`"devDependencies": {

"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-preset-env": "^1.7.0",
"parcel-bundler": "^1.12.3",
"sass": "^1.22.9"
},
"dependencies": {
"date-fns": "^2.2.1",
"mustache": "^3.0.1"
},
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html --no-source-maps --public-url $npm_package_config_public_url"
},
"browserslist": "> 0.02%"
}`

.babelrc
{ "presets": ["@babel/preset-env"] }

馃 Expected Behavior

Spread should work as is supported by Safari.

馃槸 Current Behavior

On Safari only i got error in console => "TypeError: Invalid attempt to spread non-iterable instance"

馃拋 Possible Solution

I tried google it and try some solutions, but all failed.

馃捇 Code Sample

just trying to grab two dom elements and use map on it:
const dateElement = [...document.querySelectorAll('.date')];

馃實 Your Environment

Software Version(s)
Parcel 1.12.3
Node v11.3.0
npm/Yarn 6.10.3
Operating System ios

Any help much appreciate, cheers.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Sep 30, 2019

Hey @rzubrycki! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

@jieyouxu

This comment has been minimized.

Copy link

commented Oct 1, 2019

If you evalute the expression document.querySelectorAll('.date') in the console, you will find that the evaluated expression is of type NodeList, representing a collection of Nodes (see MDN | NodeList). Note that the spread operator ...target requires that target be an iterable, i.e. to implement the [Symbol.iterator] method (see MDN | Symbol.iterator). NodeList does not implement [Symbol.iterator], which causes your TypeError (see MDN | NodeList). To resolve this issue, either (possible solutions but not limited to):

  1. Use the NodeList.forEach method and supply a function (becareful the element is of type HTMLElement or similar, refer to MDN | HTMLElement for specifics):
    document.querySelectorAll('.date').forEach(element => console.log(element))
  2. Call the NodeList.values() method which will return an iterable allowing you to use the spread operator on it:
    const dateElements = [...document.querySelectorAll('.date').values()];

Hope this helps!

@felboomy

This comment has been minimized.

Copy link

commented Oct 1, 2019

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant,,

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Oct 1, 2019

Thanks @felboomy and @jieyouxu!
Even if it's not written on MDN, I believe that modern browsers support [Symbol.iterator] on NodeList.
That said, Babel is only about core JavaScript and not about dom APIs. I suggest manually loading a polyfill for NodeList.prototype[Symbol.iterator], or (better) use Array.from(x) instead of [...x]

@felboomy

This comment has been minimized.

Copy link

commented Oct 1, 2019

Or just have general Babel or JavaScript questions, we have ..?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can鈥檛 perform that action at this time.