babel-loader: unexpected token (rest spread operator)

Here is a .babelrc that works for doing things like

const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)

---

.babelrc

{
  "presets": ["react", "es2015"],
  "plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
}

---

You can install the two plugins with:

npm install --save-dev babel-plugin-transform-es2015-destructuring

&

npm install --save-dev babel-plugin-transform-object-rest-spread

As @janzenz mentioned for me adding stage-0 worked I did not need transform-object-rest-spread and transform-es2015-destructuring

{ "presets": ["react", "es2015", "stage-0"] }

In my case I just installed stage-0 and added it on my .babelrc file, that solved for me.

You didn’t need them because you are already using the es2015 preset.

I’d recommend staying away from stage-0; use stage-3, which also includes this feature, but includes less features that have a high risk of changing dramatically.

EDIT: better / more up-to-date advice: don’t use any preset besides env, react or flow (should you use either of their features); avoid yearly or stage presets. If you need to use an experimental feature that’s not supported by those 3 presets, use its plugin directly.

@iDVB {...obj} is object rest/spread and it’s not in es2015. It’s an experimental feature. I mentioned above you need transform-object-rest-spread plugin or stage-2 preset. It’s not included in es2015 because it’s not in the spec yet and not part of react.

transform-es2015-destructuring involves a(...a), [...d] - over lists/arrays. ... with an object is different

What you’re trying to do is a stage2 feature. You can either add the plugin as you have done or add the entire stage2 preset. For more information, see https://github.com/sebmarkbage/ecmascript-rest-spread.

@Kovensky Thank you!

{
  "presets": ["es2015", "stage-3", "react"]
}

If you’re using @babel/preset-env you’ll need

npm i -D @babel/plugin-transform-destructuring @babel/plugin-proposal-object-rest-spread

so what is the minimal config I need for this?

I tried this:

     `presets: ['react', 'es2015','stage-2']?`

but still get errors

After many hours searching for info and lots of trial and error, I have tried every combination of plugins and presets possible, yet none of them have worked. Can someone please confirm a set up that works? I am running Node V6.2.2

But its not documented anywhere, that this is how I should be using it.

tried the stage-3 preset, but it still does not work for me.

            use: [{
                loader: 'babel-loader',
                options: {
                    "sourceMaps": "inline",
                    presets: [
                        ['react', "node7", "stage-3",
                            { modules: false }]
                    ]
                }

transform-object-rest-spread plugin or stage-2 preset. you can try it in the repl too

For future queriers:

on command line: yarn add babel-transform-object-rest-spread -D

If you’re going that route, the package is now called babel-plugin-transform-object-rest-spread. Also worked for me.

Things that are stage-4 are no longer proposals – they are part of the language.

It not being in babel-preset-env is because the preset hasn’t been updated yet. The babel 7 version (@babel/preset-env) supports a shippedProposals option that will enable it; the missing update is to have it enabled by default instead of enabled by shippedProposals.

To clarify, object-rest-spread is still a proposal, and right now is a stage 4 proposal, so that’s why it isn’t in babel-preset-env and we need the plugin?

I thought that all the spread operator usages were in the same stage (or same proposal). It’s weird that we can use spread/rest in arrays and fns but in objects not… I thought that the spread operator worked on any iterable (that cover objects)…

My conscience got the better of me, sorry for being snippy. You’re right, I know better than to ask those kinds of questions here. Thanks again, though for your explanation, it really did help out a lot!

As I stated above “I realize this is not stack overflow”. If answering my question is a waste of your time, then don’t answer it. My original purpose was to report a bug. It turns out I made a mistake, as we all, I’m sure you included, do. Thank you for the info you’ve given. It was helpful.

Agreed with @Kovensky, I started a project about 2 months ago installing stage-0. I changed laptops recently and after npm install the stage-0 gave me massive issues with spread operator.

For me @kareniel answer fixed the issue.

I had a similar issue. I am using package.json to define my plugins and presets. "babel": { "presets": [ "env"], "plugins": [] } I found that the .babelrc was overwriting everything I entered in package.json. Once I deleted the .babelrc file, the “env” preset alone fixed my issue of using spread syntax.

Added stage-0 by yarn add babel-preset-stage-0 and changed the .babelrc to

{
  "presets": ["react", "es2015", "stage-0"],
}

worked for me. Thanks @StevenIseki 😃

@QuantumInformation Please drop by one of our support channels: https://github.com/babel/babel#looking-for-support That config should be fine, so it’s likely an issue elsewhere.

This might help anyone coming around this issue, using babel 7: https://babeljs.io/docs/en/babel-preset-stage-0 https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

As mentioned before, I believe that @babel/plugin-proposal-object-rest-spread is the solution 👍

Facing the same problem, tried all the above suggestions. Nothing worked. Is there any perfect solution to this problem?

Tried every solution mentioned above and none of them works for me:

37:21 is on { at return [{...array[i]}]

    Module parse failed: D:\D\Projekty\QR\SimpleCQRS\SampleCQRS\QR.Web\ClientApp\services\utils.js Unexpected token (37:21)
    You may need an appropriate loader to handle this file type.
    |       for (let i = 0; i < array.length; i++) {
    |         if (array[i].name === name) {
    |             return [{...array[i]}]
    |         }
    |         let a = this.findInNestedByName(array[i].children, name)
     @ ./ClientApp/store/getters.js 1:0-34
     @ ./ClientApp/store/index.js
     @ ./ClientApp/main.js

.babelrc:

  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "stage-2"
  ],
  "plugins": ["transform-runtime","transform-es2015-destructuring", "transform-object-rest-spread"],
  "comments": false,
  "env": {
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

Something else I should do or can provide?

Good Job!!!

Yeah, realized that. Got used to Typescript where everything works. I’m using stage-0 now

env and es2017 do not contain object rest spread. Object-rest-spread is still an experimental feature which not yet finished the specification process. If you want to use it install babel-preset-stage-3 or the plugin itself. see @kareniel s comment above