Error Following React Tutorial spread operator is unexpected token

I am following this freeCodeCamp tutorial: https://youtu.be/4UZrsTqkcW4?t=10660
and am stuck at where the link takes you. I am getting the following error:

./src/index.js
SyntaxError: D:\phaser\FullReactCourse\tutorial\src\index.js: Unexpected token (32:36)

  30 |       {books.map((book) => {
  31 |         return (
> 32 |           <Book key={book.id} book={...book}></Book>
     |                                     ^
  33 |         );
  34 |       })}
  35 |     </section>

does anyone know why it works for the tutorial maker and not me? I used create-react-app just like the tutorial says.

Did you eject? What does your package.json look like and webpack.config.js?

The other possibility is that there is some other error earlier that prevents it from parsing that.

I don’t think I ejected. (I don’t even know what that means) here is my package.json:

{
  "name": "tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1"
  }
}

there is no webpack.config.js that I can find. as for a previous error here is the full function:

function BookList() {
  return (
    <section className="booklist">
      {books.map((book) => {
        return <Book key={book.id} book={...book}></Book>
      })}
    </section>
  );
}

OK, the component looks OK, assuming the rest of the file is fine.

I’m a little concerned about:

  "devDependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1"
  }

in your package.json. I wouldn’t think that you’ve have to add that. Is this a recent version of CRA?

I don’t know. This isn’t my strength, but I can’t see anything weird. Unless someone smarter than me can see something, I think we’d need a repo.

I think devDependencies might been added when I was playing around with adding the babel plugin to fix the error. I created a repo: https://github.com/jak6jak/create-react-app-bug hopefully this helps. I am on version 4.0.1 which is the latest version

OK, I think I get it now. You have:

<Book key={book.id} book={...book}></Book>

That is wrong. If you are trying to spread out the properties of book, it should be:

return <Book key={book.id} {...book}></Book>

What you had was confusing it, it was like you were trying to pass in a parameter “book” that was a collection of properties - that confused babel. You can spread them like that, or you could use the spread operator to make a shallow copy, like:

book={ { ...book } }

if that was what you wanted (which it isn’t).

When I fix that, it works for me.

Thanks for your help. I can’t believe I missed that!

“dumb mistakes” are just a part of developer life - get used to it.

1 Like