Babel 6 with just JSX transform and no other transforms

Question

I want to use babel-plugin-transform-jsx, but no other transforms on some JSX files with some Javascript currently considered at stage 3 i.e. candidates.

Transpilation fails with a Syntax Error if those JSX files contain:

rest spread operators {...x, ...y}
async generators async function * () {}

The objective is to improve debug-ability of code in a modern browser, since the Babel transpilation of async generators in particular seems to break the dev tools for Chrome, Firefox i.e. breakpoints stop working, references to this fail, debugger calls are skipped, and numerous other observed problems.

There seems to be no alternative to using Babel to generate JSX in the above form — which works fine; an ideal solution would be to just have Babel ignore the async generators and rest-spread operators (and any other code it'd otherwise throw a syntax error on).

EDIT

Using the plugin suggested by Victor appears to be the correct solution but running babel-plugin-syntax-async-generators on this:

class SearchCriteria {
  async * results (authManager) { }
}

Causes the error:

Unexpected token, expected "(" (2:10)
  1 | class SearchCriteria {
> 2 |   *async results(authManager) {
    |          ^

Reproducible here, when you add the syntax-async-generators plugin.

Viktor Vlasenko Viktor Vlasenko · Accepted Answer · 2018-07-24T09:16:01

Babel has transform plugins and syntax plugins. Transform plugins apply transformations to your code. Syntax plugins allow Babel to parse specific types of JavaScript syntax, not transform it. Transform plugins will enable the corresponding syntax plugin so you don't have to specify both.

So in your case what you need is babel-plugin-transform-jsx transform plugin and two syntax plugins: babel-plugin-syntax-async-generators, babel-plugin-syntax-object-rest-spread.

The corresponding .babelrc will be:

{
  plugins: ["babel-plugin-transform-jsx", "babel-plugin-syntax-async-generators", "babel-plugin-syntax-object-rest-spread"]
}

Minimal package.json:

{
  "name": "babel-jsx",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "babel index.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-syntax-async-generators": "^6.13.0",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-jsx": "^2.0.0",
    "react": "^16.4.1"
  }
}

And if you have JavaScript code like this in index.js:

import React from 'react'

const MyComp = <div>Hello</div>;

async function* myfunc() {
  const array = [1, 2, 3];
  console.log(...array);
}

And run commands:

yarn

yarn build

Then the output will be:

$ babel index.js
import React from 'react';

const MyComp = {
  elementName: 'div',
  attributes: {},
  children: ['Hello']
};

async function* myfunc() {
  const array = [1, 2, 3];
  console.log(...array);
}

Babel 6 with just JSX transform and no other transforms

EDIT

1 Answers