How do I enable spread operator with plugin-proposal-object-rest-spread in Babel 7?

Question

I'm trying to enable the spread operator in my project using Babel, but since Babel has remove stage presets I'm having no luck getting spread operators to work with: https://www.npmjs.com/package/@babel/plugin-proposal-object-rest-spread

I've installed plugin-proposal-object-rest-spread and added it to my .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

But I'm still getting the following error:

Support for the experimental syntax 'objectRestSpread' isn't currently enabled 
 (28:3):

  26 |   onClick,
  27 |   text,
> 28 |   ...allProps
     |   ^
  29 | }) => {
  30 |   let Element = isStatic ? 'span' : renderAs;
  31 |   const props = modifiers.clean(allProps);

Add @babel/plugin-proposal-object-rest-spread (https://git.io/vb4Ss) to the 'plugins' section of your Babel config to enable transformation.

It suggests I add @babel/plugin-proposal-object-rest-spread. I have, it's in my package.json.

Any ideas?

Answer 1

NOTE: I'm using Quasar framework, so my instructions may be very slightly different, but is mostly the same.

For the others like me who were spending hours on this issue that shouldn't have been in the first place, here's how I solved it:

1. Go to your directory where you currently have your .babelrc file.
2. Create a file called babel.config.js and add the following contents:

module.exports = {
    "plugins": [
      "@babel/plugin-proposal-object-rest-spread"
    ]
}

3. Now, do an npm install @babel/plugin-proposal-object-rest-spread --save-dev

4. Reload your server, running project. It should work now.

In my case, I didn't touch my .babelrc but just left it as it is and added the new config file. But others have had luck just copy pasting all the content in .babelrc into babel.config.js

Just my $0.02, (mods you can probably delete this part):

Honestly, Babel has become a can of worms. I don't understand why they constantly need to keep screwing up perfectly working implementations. I wish we'd be in a future where won't need to touch this time sink as anything wrong with Babel causes atleast 2 hours on average to fix.