...rest not working in Edge, React project

Question

handleSaveDefault = () => {
    let { Default, ...rest } = this.state.views;
    this.handleViewMenuClose();
    let setState = () => {
      return this.setState({
        views: { Default: [...this.state.selectedFields], ...rest },
      });
    };

This is working fine in chrome, but in Edge I get an error Expected identifier, string or number pointing to the ...rest in let { Default, ...rest } = this.state.views;

I read that ...rest wasn't supported in older versions of Edge but now it should be. I have updated Windows but still the error persists. I have babel installed and it shows up in my package-lock.json but not in package.json.

Is there a way to get this to work or do I have to create my own looping workaround?

What does your package.json look like? – HMR Apr 07 '20 at 16:25 — HMR, Apr 07 '20 at 16:25

score 1 · Answer 1 · answered Apr 08 '20 at 02:00

1

Which version of Edge are you using? Please check the Edge version in the browser setting. Object rest/spread properties is not supported by Edge Legacy but supported by Edge Chromium. If you want to use the new Edge Chromium, you need to download and install it manually. Only updating Windows won't upgrade your Edge browser.

If you want to support the object rest/spread properties in Edge Legacy, you could refer to the following steps:

Install @babel/plugin-proposal-object-rest-spread by running:

npm install --save-dev @babel/plugin-proposal-object-rest-spread

Then add it as plugins inside the package.json:

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

For more detailed information, you could refer to this thread and this article.

answered Apr 08 '20 at 02:00

Yu Zhou

11,532
1
8
22

Thank you for your response. I want to support the legacy version because I can't control my users. I ran your npm install and that added `"devDependencies": { "@babel/plugin-proposal-object-rest-spread": "^7.9.5" }` I am unsure where to add the plugins snipet you posted? My current package.jason doesn't have babel listed other than under devDependencies that I just added. babel is listed many times in package-lock.json but the file is too large to post. Where do I place `{ "plugins": ["@babel/plugin-proposal-object-rest-spread"] }` ? – Bro3Simon Apr 21 '20 at 17:50
I compared it with my former react project where `...rest` can work well, the issue is like [this answer](https://stackoverflow.com/questions/60417760/react-cant-deconstruct-restprops-in-edge/60430889#60430889) says: react removed the babel-spread-operator in "babel-preset-react-app" (folder inside node_modules). I found a easy way to fix this, just **copy the babel-preset-react-app folder in former project and paste to replace the same folder in your new project.** Then the `...rest` can work well in Edge Legacy. FYI, the work-well babel-preset-react-app version for me is 9.0.2. – Yu Zhou Apr 24 '20 at 06:33

score 0 · Accepted Answer · answered Dec 27 '20 at 17:32

0

I was able to solve it by updating Edge Legacy to Edge Chromium.

answered Dec 27 '20 at 17:32

Bro3Simon

129
10

...rest not working in Edge, React project

2 Answers2