In babel-preset-react-app, loose option of @babel/plugin-proposal-object-rest-spread should be enabled
See original GitHub issueIs this a bug report?
Yes
Did you try recovering your dependencies?
npm version: 6.9.0
Which terms did you search for in User Guide?
words:
babel-preset-react-app @babel/plugin-proposal-object-rest-spread
Environment
(paste the output of the command here)
Steps to Reproduce
- Create an app with create-react-app
- Replace index.js with
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; let n = { x, y, ...z };
- npm run build
Expected Behavior
As per doc it should use Object.assign
.
(window.webpackJsonp = window.webpackJsonp || []).push([
[0],
[
function(e, n, r) {
e.exports = r(1);
},
function(e, n, r) {
'use strict';
r.r(n);
var t = { x: 1, y: 2, a: 3, b: 4 },
o = t.x,
c = t.y,
i = (function(e, n) {
if (null == e) return {};
var r,
t,
o = (function(e, n) {
if (null == e) return {};
var r,
t,
o = {},
c = Object.keys(e);
for (t = 0; t < c.length; t++) (r = c[t]), n.indexOf(r) >= 0 || (o[r] = e[r]);
return o;
})(e, n);
if (Object.getOwnPropertySymbols) {
var c = Object.getOwnPropertySymbols(e);
for (t = 0; t < c.length; t++)
(r = c[t]), n.indexOf(r) >= 0 || (Object.prototype.propertyIsEnumerable.call(e, r) && (o[r] = e[r]));
}
return o;
})(t, ['x', 'y']);
Object.assign({ x: o, y: c }, i);
},
],
[[0, 1]],
]);
//# sourceMappingURL=main.462a066a.chunk.js.map
However, I need to override the setting to loose: true
and useBuiltIns: true
to get the expected behavior.
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-object-rest-spread",
{
"loose": true,
"useBuiltIns": true
}
]
]
},
Actual Behavior
This is the default with no override of @babel/plugin-proposal-object-rest-spread
plugin.
(window.webpackJsonp = window.webpackJsonp || []).push([
[0],
[
function(e, t, n) {
e.exports = n(1);
},
function(e, t, n) {
'use strict';
function r(e, t, n) {
return t in e ? Object.defineProperty(e, t, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : (e[t] = n), e;
}
n.r(t);
var o = { x: 1, y: 2, a: 3, b: 4 };
!(function(e) {
for (var t = 1; t < arguments.length; t++) {
var n = null != arguments[t] ? arguments[t] : {},
o = Object.keys(n);
'function' === typeof Object.getOwnPropertySymbols &&
(o = o.concat(
Object.getOwnPropertySymbols(n).filter(function(e) {
return Object.getOwnPropertyDescriptor(n, e).enumerable;
})
)),
o.forEach(function(t) {
r(e, t, n[t]);
});
}
})(
{ x: o.x, y: o.y },
(function(e, t) {
if (null == e) return {};
var n,
r,
o = (function(e, t) {
if (null == e) return {};
var n,
r,
o = {},
c = Object.keys(e);
for (r = 0; r < c.length; r++) (n = c[r]), t.indexOf(n) >= 0 || (o[n] = e[n]);
return o;
})(e, t);
if (Object.getOwnPropertySymbols) {
var c = Object.getOwnPropertySymbols(e);
for (r = 0; r < c.length; r++)
(n = c[r]), t.indexOf(n) >= 0 || (Object.prototype.propertyIsEnumerable.call(e, n) && (o[n] = e[n]));
}
return o;
})(o, ['x', 'y'])
);
},
],
[[0, 1]],
]);
//# sourceMappingURL=main.5bdfaa42.chunk.js.map
Reproducible Demo
(Paste the link to an example project and exact instructions to reproduce the issue.)
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
babel/plugin-proposal-object-rest-spread
By default, this plugin will produce spec compliant code by using Babel's objectSpread helper. loose. boolean , defaults to false . Enabling this...
Read more >@babel/plugin-proposal-class-properties Code Examples | Snyk
Learn more about how to use @babel/plugin-proposal-class-properties, ... class { handleClick = () => { } } // Enable loose mode to use...
Read more >Latest Nuxt v2.15.7 install with babel "loose" option warnings
This happens if your Nuxt version is between 2.15.5 and 2.15.7 (I think). A temporary solution could be adding this to your nuxt.config.js ......
Read more >@babel/plugin-proposal-object-rest-spread - npm
Compile object rest and spread to ES5. ... There are 2199 other projects in the npm registry using @babel/plugin-proposal-object-rest-spread.
Read more >Babel - Storybook
V7 mode is a new option available in Storybook 6.4+ behind a feature flag. Its goal is to make the Babel configuration simpler,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
That’s a good question. I think it may be a historical reason from a couple years back. I don’t think the comment above it is true anymore either: https://github.com/facebook/create-react-app/blob/4b5b76b79ffabcafc5fde02f583baceae6bd0446/packages/babel-preset-react-app/create.js#L157-L159.
The above comment isn’t true unless
loose
mode is enabled. It will use theobjectSpread
helper instead ofObject.assign
whenloose: false
.I have tested the options of loose and useBuitIns.
loose: false
anduseBuiltIns: false
will use object spread fromnode_modules/@babel/runtime/helpers/esm/objectSpread.js
loose: false
anduseBuitIns: true
will be the same as the first one.loose: true
anduseBuiltIns: false
will use esm_extends fromnode_modules/@babel/runtime/helpers/esm/extends.js
. According to the documentation linked, enabling loose will use the Babel’s extends helper and it is correct and if we toggle useBuiltIns too it will use Object.assign. Therefore, just by setting useBuiltIns to true has no effect on anything.loose: true
anduseBuiltIns: true
will use Object.assign.