Error Following React Tutorial spread operator is unexpected token

JavaScript
1

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.

2

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

3

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

4

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>
  );
}
5

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.

6

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

7

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.

8

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

9

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

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.