Transform Object Rest Spread: Unexpected Token

[thesublimeobject]

I cannot get transform-object-rest-spread to work, and have tried several different methods. I continue to get the following error:

Module parse failed: /Users/KBD/sites/template/js/components/isotopes/util/factory.js Unexpected token (45:57)
You may need an appropriate loader to handle this file type.

I have tried both using .babelrc, and using the options configuration inside my webpack config. The odd thing is, I am running my webpack config through a gulp/browserSync build, whereas one of my other projects that uses pure NPM scripts has no issues. But, my gulp configuration is really doing nothing more than trigger an instance of browsersync which is running in conjunction with webpack-dev-server, so it shouldn't matter as far as I know. My configuration is as follows:

.babelrc

{
	"presets": [
		[
			"env",
			{
				"targets": {
					"browsers": [
						"last 2 versions",
						"safari >= 8",
						"ie >= 10",
						"ios >= 8"
					]
				},
				"useBuiltIns": true
			}
		]
	],
	"plugins": [
		[
			"transform-runtime", {
				"polyfill": false,
			}
		],
		"syntax-dynamic-import",
		"transform-async-to-generator",
		"transform-regenerator",
		"lodash",
		"transform-object-rest-spread",
		"transform-flow-strip-types"
	]
}

In addition, I have made note of the "Caveat" at the bottom of the the .README, and the version I am using is > 6.19.0. I'm really out of ideas. Any help would be greatly appreciated!

[hzoo]

Can you post the code that is erroring? it's hard to not if you have a config error, theres a bug in Babel, or your syntax is wrong

[thesublimeobject]

Yeah, for sure:

let filtersObj = allFilters.reduce((obj, filter) => ({ ...obj, [filter]: [] }), {})

[loganfsmyth]

What's your webpack config?

[thesublimeobject]

const path =  require('path')
const webpack = require('webpack')
const StatsPlugin = require('stats-webpack-plugin')

module.exports = {
	devtool: 'inline-source-map',
	context: path.join(__dirname, '..', '..', 'js'),

	entry: {
		app: ['./app'],
	},

	output: {
		path: path.resolve(__dirname, '..', '..', 'build', 'scripts'),
		filename: '[name].js',
		publicPath: '/build/scripts/',
	},

	module: {
		rules: [
			{
				test: /\.js$/,
				use: {
					loader: 'babel-loader',
				},
				include: [
					path.resolve(__dirname, '..', 'js'),
					path.resolve('node_modules', 'when-dom-ready'),
				],
				exclude: /(node_modules)/,
			},

			{
				test: /\.(png|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
				loader: 'url-loader?limit=100000',
			},

			{
				test: /\.json$/,
				loader: 'json-loader',
			},

			{
				test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter|fastdom/,
				loader: 'imports-loader?define=>false&this=>window',
			},
		]
	},

	resolve: {
		modules: [
			path.resolve(__dirname, '..', '..', 'js'),
			path.resolve(__dirname, '..', '..', 'js', 'modules'),
			path.resolve(__dirname, '..', '..', 'js', 'components'),
			'node_modules',
		],
		alias: {
			util: path.resolve(__dirname, '..', '..', 'js', 'util'),
		},
		extensions: ['.js'],
	},

	target: 'web',
	cache: true,

	plugins: [
		new webpack.NoEmitOnErrorsPlugin(),
		new webpack.NamedModulesPlugin(),
		new StatsPlugin('stats.json', {
			chunkModules: true,
			exclude: [/node_modules[\\\/]react/]
		}),
	],

	devServer: {
		quiet: false,
		clientLogLevel: 'error',
		compress: true,
		stats: true,
	},

	performance: {
		hints: process.env.NODE_ENV === 'production' ? 'warning' : false
	},
}

[ghost]

Same here.

"babel-preset-env": "^1.5.1",
"babel-polyfill": "^6.23.0",

presets: [
            [
              'env',
              {
                targets: { browsers: ['> 1%', 'iOS >= 8', 'Android >= 4'] },
                modules: false
              }
            ]
          ]

Using targets:
{
  "android": "4",
  "chrome": "49",
  "edge": "14",
  "firefox": "52",
  "ie": "11",
  "ios": "8"
}

Modules transform: false

Using plugins:
  check-es2015-constants {"android":"4","ie":"11","ios":"8"}
  transform-es2015-arrow-functions {"android":"4","ie":"11","ios":"8"}
  transform-es2015-block-scoped-functions {"android":"4","ios":"8"}
  transform-es2015-block-scoping {"android":"4","ie":"11","ios":"8"}
  transform-es2015-classes {"android":"4","ie":"11","ios":"8"}
  transform-es2015-computed-properties {"android":"4","ie":"11"}
  transform-es2015-destructuring {"android":"4","chrome":"49","edge":"14","firefox":"52","ie":"11","ios":"8"}
  transform-es2015-duplicate-keys {"android":"4","ie":"11","ios":"8"}
  transform-es2015-for-of {"android":"4","chrome":"49","edge":"14","firefox":"52","ie":"11","ios":"8"}
  transform-es2015-function-name {"android":"4","chrome":"49","edge":"14","firefox":"52","ie":"11","ios":"8"}
  transform-es2015-literals {"android":"4","firefox":"52","ie":"11","ios":"8"}
  transform-es2015-object-super {"android":"4","ie":"11","ios":"8"}
  transform-es2015-parameters {"android":"4","firefox":"52","ie":"11","ios":"8"}
  transform-es2015-shorthand-properties {"android":"4","ie":"11","ios":"8"}
  transform-es2015-spread {"android":"4","ie":"11","ios":"8"}
  transform-es2015-sticky-regex {"android":"4","ie":"11","ios":"8"}
  transform-es2015-template-literals {"android":"4","ie":"11","ios":"8"}
  transform-es2015-typeof-symbol {"android":"4","ie":"11","ios":"8"}
  transform-es2015-unicode-regex {"android":"4","chrome":"49","ie":"11","ios":"8"}
  transform-regenerator {"android":"4","chrome":"49","firefox":"52","ie":"11","ios":"8"}
  transform-exponentiation-operator {"android":"4","chrome":"49","ie":"11","ios":"8"}
  transform-async-to-generator {"android":"4","chrome":"49","edge":"14","ie":"11","ios":"8"}
  syntax-trailing-function-commas {"android":"4","chrome":"49","ie":"11","ios":"8"}

[hzoo]

@yiwan env doesn't include anything < Stage 4 like object rest spread so you need that plugin individually http://babeljs.io/docs/plugins/transform-object-rest-spread/#example

[ghost]

@hzoo Haven't update version for a while, I should check babel's doc first 😔, but thanks.

[thesublimeobject]

@hzoo Yes, I know. As you can see above in my first post, I have explicitly included the plugin for "transform-object-rest-spread" in .babelrc, unless I have somehow included it incorrectly?

[DrYSG]

Same here:

To create an electron & react application I was using the react and node7 presents as follows (which works)

  "babel": {
    "sourceMaps": "inline",
    "presets": [
      "react",
      "node7"
    ]
  },

But I wanted to go with something more future proof so I tried out the preset-env

  "babel": {
    "sourceMaps": "inline",
    "presets": [
      [
        "env",
        {
          "targets": {
            "electron": "1.6.7"
          },
          "debug": true,
          "useBuiltIns": true
        }
      ]
    ]
  },

However this is not working for me. It seems that es7 object spread is not being found, and there are issues with react JSX. What simple thing did I miss?

babel-preset-env: `DEBUG` option

Using targets:
{
  "electron": "1.6.7"
}

Modules transform: commonjs

Using plugins:
  syntax-trailing-function-commas {"electron":"1.6.7"}

Using polyfills:
  es7.string.pad-start {"electron":"1.6.7"}
  es7.string.pad-end {"electron":"1.6.7"}
  web.timers {"electron":"1.6.7"}
  web.immediate {"electron":"1.6.7"}
  web.dom.iterable {"electron":"1.6.7"}
src\dash\actions.js -> dist\dash\actions.js
src\dash\actionTypes.js -> dist\dash\actionTypes.js
SyntaxError: src/dash/dash.js: Unexpected token (29:18)
  27 |     let stats = remote.getGlobal('DASH').stats
  28 |     //stats.jobStats = (stats.jobStats == "") ? "0" : stats.jobStats  -- we only needed this if the folder was m
issing
> 29 |     let state = { ...STORE.getState().ServerStats }
     |                   ^
  30 |     let original = { ...state }
  31 |     state.WatsonInstalled = (state.WatsonInstalled != stats.watsonInstalled) ? stats.watsonInstalled : state.Wat
sonInstalled
  32 |     state.WatsonRunning = (state.WatsonRunning != stats.watsonRunning) ? stats.watsonRunning : state.WatsonRunni
ng
SyntaxError: src/dash/reducers.js: Unexpected token (18:25)
  16 |     switch (action.type) {
  17 |         case A.SetUpdating:
> 18 |             newState = { ...state, isUpdating: action.payload }
     |                          ^
  19 |             return newState
  20 |         case A.SetChanger:
  21 |             newState = { ...state, fieldName: action.payload }
SyntaxError: src/jsx/Configuration.jsx: Unexpected token (19:4)
  17 |     resetForm,
  18 |     isUpdating,
> 19 |     ...props }) => {
     |     ^
  20 |     COMPONENTS["Configuration"] = props // Register this component in the Dash Components list (so we can get th
e change() function)
  21 |     return (
  22 |         <Form horizontal onSubmit={(e) => { alert('foobar'); handleSubmit(doSubmit) }}>
SyntaxError: src/jsx/Controls.jsx: Unexpected token (7:8)
   5 | const Control = ({ WatsonInstalled, WatsonRunning, FMERunning, buttonAction }) => {
   6 |     return (
>  7 |         <Grid>
     |         ^
   8 |             <Row className="propRow">
   9 |                 <Col sm={3}>
  10 |                     <OverlayTrigger placement="bottom"
SyntaxError: src/jsx/Dashboard.jsx: Unexpected token (12:4)
  10 | const App = ({ GLVersion }) => {
  11 |   return (
> 12 |     <Grid>
|         ^
   8 |             <Row className="propRow">
   9 |                 <Col sm={3}>
  10 |                     <OverlayTrigger placement="bottom"
SyntaxError: src/jsx/Dashboard.jsx: Unexpected token (12:4)
  10 | const App = ({ GLVersion }) => {
  11 |   return (
> 12 |     <Grid>
     |     ^
  13 |       <Row className="versionRow">
  14 |         <Col smOffset={10} sm={1} className="fieldLabel">Version:</Col>
  15 |         <Col sm={1} className="fieldLabel">{GLVersion}</Col>
SyntaxError: src/jsx/FieldInputs.jsx: Unexpected token (9:8)
   7 | const FieldControl = ({ input, meta, type, min, max, tip, cid }) => {
   8 |     return (
>  9 |         <OverlayTrigger placement="left" overlay={(<Tooltip id={cid + "-tip"}>{tip}</Tooltip>)}>
     |         ^
  10 |             <FormControl
  11 |                 type={type}
  12 |                 min={min}
SyntaxError: src/jsx/Utilities.jsx: Unexpected token (9:8)
   7 | const Util = ({ JobsDirSize, killAction }) => {
   8 |     return (
>  9 |         <Grid>
     |         ^
  10 |             <Row className="propRow">
  11 |                 <Col sm={3} className="fieldLabel">Job Folder Size:</Col>
  12 |                 <Col sm={9} className="fieldLabel">{JobsDirSize} MB</Col>
src\main\main.js -> dist\main\main.js
src\main\monitor.js -> dist\main\monitor.js
src\main\utils.js -> dist\main\utils.js
src\main\watson.js -> dist\main\watson.js

[existentialism]

@thesublimeobject he was talking to @yiwan re: missing object-rest-spread plugin. Is there anyway you can create a repro that reproduces the issue, it would greatly help in debugging!

@DrYSG as @hzoo mentioned, the object rest spread transform is not included in this preset, so you should add the plugin to your babel config.

[thesublimeobject]

@existentialism Yeah...it's a pretty big WP project though, so let me see if I can reduce it down to a smaller reproducible instance that I can throw on a repo somewhere.

[hzoo]

Closing for inactivity and lack or repo for now - again want to note object rest spread isn't in this preset until #91 happens (its not ES7, or ES2015, it's Stage 3 and not in JS yet)

[miracle2k]

Apparently, unless transform-es2015-destructuring is also included, transform-object-rest-spread will not work.

If you want to destructure in parameters, you need to further add "transform-es2015-parameters".

[line0]

I also haven't seen transform-object-rest-spread work with babel-preset-env, even with destructuring, and parameters. @miracle2k do you need to include the plugins in any specific order for transform-object-rest-spread to work?
nvm, with transform-es2015-destructuring and transform-es2015-parameters it actually works - thanks!

[devakone]

@line0 is there a particular order you're loading them in to get it to work?

[gregbarcza]

TL;DR;

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "flow"
  ],
  "plugins": [
    "transform-es2015-destructuring",
    "transform-es2015-parameters",
    "transform-object-rest-spread"
  ]
}