3

I am trying to "modernize" mern.io starter bolerplate by replacing babel es2015 and stage-0 presets with env. However, it seems that env preset does not recognize the following snippet in client/modules/Intl/IntlReducer.js:9:

import { enabledLanguages, localizationData } from '../../../Intl/setup';
import { SWITCH_LANGUAGE } from './IntlActions';

const initLocale = global.navigator && global.navigator.language || 'en';

const initialState = {
  locale: initLocale,
  enabledLanguages,
  ...(localizationData[initLocale] || {}),
// ^ 
// SyntaxError: client/modules/Intl/IntlReducer.js: Unexpected token
};


const IntlReducer = (state = initialState, action) => {
  switch (action.type) {
    case SWITCH_LANGUAGE: {
      const { type, ...actionWithoutType } = action; // eslint-disable-line
      return { ...state, ...actionWithoutType };
    }

    default:
      return state;
  }
};

export default IntlReducer;

localizationData object is populated in Intl/setup.js:56

This spread operator seems quite normal to me, I cannot spot the syntax error. Also it seems that other code preceding to this file, is being transpiled just fine, so I guess env preset is applied correctly.

What may be the reason of this failure? Was this particular flavor of spread operator not accepted from stage-0 into current version of ES? How can I investigate this issue further?

Full error message (project root path stripped):

node_modules/babel-core/lib/transformation/file/index.js:590
      throw err;
      ^

SyntaxError: client/modules/Intl/IntlReducer.js: Unexpected token (9:2)
   7 |   locale: initLocale,
   8 |   enabledLanguages,
>  9 |   ...localizationData[initLocale]
     |   ^
  10 | };
  11 | 
  12 | const IntlReducer = (state = initialState, action) => {
    at Parser.pp$5.raise (node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$3.parseIdentifier (node_modules/babylon/lib/index.js:4332:10)
    at Parser.pp$3.parsePropertyName (node_modules/babylon/lib/index.js:4156:96)
    at Parser.parsePropertyName (node_modules/babylon/lib/index.js:6229:23)
    at Parser.pp$3.parseObj (node_modules/babylon/lib/index.js:4045:12)
    at Parser.pp$3.parseExprAtom (node_modules/babylon/lib/index.js:3719:19)
    at Parser.parseExprAtom (node_modules/babylon/lib/index.js:7238:22)
    at Parser.pp$3.parseExprSubscripts (node_modules/babylon/lib/index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (node_modules/babylon/lib/index.js:3474:19)
    at Parser.pp$3.parseExprOps (node_modules/babylon/lib/index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (node_modules/babylon/lib/index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (node_modules/babylon/lib/index.js:3344:19)
    at Parser.parseMaybeAssign (node_modules/babylon/lib/index.js:6474:20)
    at Parser.pp$1.parseVar (node_modules/babylon/lib/index.js:2340:24)
    at Parser.pp$1.parseVarStatement (node_modules/babylon/lib/index.js:2169:8)
Ivan Aksamentov - Drop
  • 12,860
  • 3
  • 34
  • 61
  • 3
    Object spread is not in the specification yet, it's in stage 3 AFAIK. – elclanrs Jan 02 '18 at 18:35
  • @elclanrs I see. Is there a good trusted source where one can learn about what proposed features are in which state currently? What would be the correct "future-proof" way for me to fix the error? To add "stage-3" preset or to add "transform-object-rest-spread" plugin, or something else? – Ivan Aksamentov - Drop Jan 02 '18 at 18:43
  • 2
    You can track it in this repo https://github.com/tc39/proposals. In your case you'd need to add the extra babel transform. – elclanrs Jan 02 '18 at 18:44
  • 2
    @Drop use [babel site](https://babeljs.io/docs/plugins#presets) to see what you get out of the presets. – MinusFour Jan 02 '18 at 18:47
  • I checked both resources, thank you guys. The issue is solved by adding `"transform-object-rest-spread"` into `plugins` in `.babelrc` and installing `babel-plugin-transform-object-rest-spread` package. @elclanrs Feel free to post it as an answer. – Ivan Aksamentov - Drop Jan 02 '18 at 18:53
  • [`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) – Felix Kling Jan 03 '18 at 12:41
  • @FelixKling Wow! Should we call it "The thing that don't have name in the spec" then? To shorten a bit I propose to name it simply "Resty McSpreadface" :) – Ivan Aksamentov - Drop Jan 03 '18 at 18:49
  • I had this interesting conversion regarding my naming suggestion: https://mobile.twitter.com/fkling42/status/880482008421474305 ;) – Felix Kling Jan 03 '18 at 18:51

1 Answers1

3

Object spread is not in the specification yet, it is currently in stage 3, which means that the env preset won't provide this feature.

If you want to use this feature with Babel, you will need to add the babel-plugin-transform-object-rest-spread transform.

You can check the status of the ES proposals in this repo https://github.com/tc39/proposals

elclanrs
  • 92,861
  • 21
  • 134
  • 171