2

I've a problem and somehow I just can't solve it. I tried everything for hours but I just don't find a solution. It worked in older projects, but doesn't work with a brand new react project created with create-react-app.

Consider the following code:

App.js:

function App() {
  const test = {
    test1: {},
    test2: {}
  };
    return (
        <div className="App">
            Cool!
          <Test
            name1="cool1"
            {...test}
          />
        </div>
    );
}

export default App;

Nothing big here. If I start the project with npm start, everything works as expected and I see the "Cool!" in the Browser. (Test is defined below, its a simple component that returns a div.)

Now, if I try to use ...props in my function parameters for Test, like this:

export const Test = ({name1, ...props}) => {
    return (
        <div>yay! {props.name1}</div>
    )
};

It works fine in chrome, but Microsoft edge says:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

I use this syntax in older projects, created with older version of create-react-app without any problem, so I'm not too sure where the problem is. Could this even be a general bug in the create-react-app, since the project is literally created with it and has no libraries added to it.

Best Regards and thanks for any help!

Twinfriends
  • 1,972
  • 1
  • 14
  • 34
  • edge does't seem to support destructuring, so the answer as to why it used to work but works now will have to do with the specific webpack / babel configuration of the two systems. – TKoL Feb 26 '20 at 16:04
  • @TKoL Yes thats what I think as well. Thank you for the answer! Pretty strange that the new create-react-app doesn't have those settings on board from beginning. Will try to find what setting is missing and probably report it to them, since I think its a pretty important feature. – Twinfriends Feb 26 '20 at 16:07
  • 1
    Your code seems wrong to me, `export const Test = ({name1, ...props}) => {` and then you are using `props.name1` in `return (
    yay! {props.name1}
    )`. First you are using `...props` to capture rest of the properties in it. You have already destructured `name1` so it wont be in your `props` identifier     – Rikin Feb 26 '20 at 16:19
  • @Rikin Yeh, you're right. Sorry, was just copying a example, forgot to change back some changes I made. Still doesn't change anything. But I think I found the problem. Actually, react removed the babel-spread-operator from their babel react-app presets... – Twinfriends Feb 26 '20 at 16:47
  • @Twinfriends is there a way to add that without ejecting? If so, please post an answer here, I'm curious – TKoL Feb 26 '20 at 17:02
  • I reproduced the issue with `react 16.12.0`. From your last comment, it seems that you have found a solution. You could post your solution as an answer, it can help other community members in similar kind of issues in the future. Thanks for your understanding. – Yu Zhou Feb 27 '20 at 06:28
  • 1
    @TKoL Yes, added them without ejecting. See my answer. – Twinfriends Feb 27 '20 at 10:18
  • @YuZhou Posted it! If its not clear, please let me know, english isn't my first language – Twinfriends Feb 27 '20 at 10:18

1 Answers1

5

After searching for a while, I found a solution for the problem. It works without ejecting.

The Problem & the way I found a solution:

At some point in the past, react decided to remove some babel presets from their react-app presets. I compared the "babel-preset-react-app" (folder inside node_modules) from an older project, with the babel-presets from a newly created react app (created with create-react-app v3.4). By comparing the package.json from the babel-preset-react-app from both applications, I found out that in the newer version, there are much less babel plugins installed.

The solution: Install the @babel/plugin-proposal-object-rest-spread (and maybe also the @babel/plugin-transform-spread just to be sure) by running:

npm install @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-spread

Once done, simply add them as plugins inside the package.json of your react app, below the imported presets from react:

"babel": {
    "presets": [ // This line should already be there if you created your project with CRA
      "react-app"
    ],
    "plugins": [
      "@babel/plugin-transform-spread",
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }

I hope this helped!

Twinfriends
  • 1,972
  • 1
  • 14
  • 34
  • 1
    Might end up having to make use of this myself at some point. – TKoL Feb 27 '20 at 11:40
  • 1
    @TKoL Could happen sooner than later I think... because deconstructing in function props isn't really that uncommon. Sadly I couldn't find a reason why they removed it from their presets. If you have any further question, feel free to tag me in this post! – Twinfriends Feb 27 '20 at 11:42