[Solution] Three Dots Unexpected Token Error in React

The ES6 spread notation (i.e. rest properties) is handy, especially when rendering certain elements in JSX for React applications.

For example, a common use case is to use a base styling object, and modify some of the values (or add new ones).

But when trying to use it, there are 2 possible ways to get a 'three dots unexpected token error'. I'll walk you through the solutions to both.

If you want to learn more about using ES6 properties, I highly recommend taking Tyler McGinnis' JavaScript courses.

Do You Have the Correct Babel Plugins?

You need Babel to transpile your JSX into a usable JavaScript files for browsers in the form of a webpack loader. Assuming you already had your React app up and running (whether just "hello world" or more), this probably is not your issue. Still, I'll go through it quickly.

There's a lot of outdated advice on Stack Overflow how to make sure you have the correct Babel presets and plugins installed, so let me clear things up.

First, you might here that you need `babel-preset-stage-0` installed. That's outdated, and now deprecated.

What you do need is one of 2 things.

Babel's `preset-react`

If you have a somewhat recent version of this installed, you should be good to go. It contains the plugin you'll need for the three dots notation.

If not, install it with `npm install --save-dev @babel/preset-react`, and then add it to your `package.json` file under babel presets.

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

If you're not familiar with presets, they're essentially collections of related Babel plugins that you might need. It saves you time installing each one, although you can if you want.

The presets above contain all you need to convert JSX to valid JavaScript, and ES2015 to a compatible version for all browsers.

Alternatively, install Babel's `transform-object-rest-spread` plugin

Again, once installed using npm, add it to your `package.json` file under the babel plugins section.

"babel": { "presets": [ "@babel/preset-env", ], "plugins": [ [ "@babel/plugin-proposal-class-properties" ] ] ... }

Watch for syntax errors here, there's a lot of nested brackets going on.

While Stack Overflow is great, it's a pain when you're dealing with packages that change drastically over time. Questions aren't allowed to be asked multiple times, so the right answer isn't always at the top.

Now, even if you have the right Babel presets and plugins installed, you still might see an error like this when you try to use it:

Or you might see an error like "module build failed syntaxerror".

Either way, it has a very simple solution in the vast majority of situations.

You’re Likely Not Passing in a JavaScript Object

I’m not accusing you of not understanding basic JavaScript, but it’s an easy mistake to make in this situation.

An example should make it clear.

In our example, say that you have a base styling object that you’d like to pass to certain objects.

But, we want to make a certain `div` have blue text instead of the default red text.

Here’s what you might come up with at first:

The spread operator is being used to pass the `defaultStyles` object to our div, but we want the text color to be blue.

It almost works, but gives us an “unexpected token” error when trying to compile.

Look closer at how we pass in the styles to the div.

Remember that the outer curly braces in JSX indicate to React that there’s a JavaScript expression inside to evaluate.

So if you ignore those outer brackets in our “style” property, what we’re essentially passing is just:

...defaultStyles, color: ‘blue’

That’s not valid JavaScript, of course, as it’s not wrapped in curly braces that an object needs.

The simple solution is to add an extra set of curly braces so that we’re using the spread operator correctly now inside an actual object:

This is one of those fixes that seems so obvious and simple once you see it, but it’s understandable why this mistake happens in the first place in React applications.