0

I need to make my javascript (which is in a non-Node.js environment) backwards compatible so I'm trying to utilize Babel to transpile my code as suggested in this post

babel-standalone works great except it doesnt seem to work with the spread/rest operator

For example, the following works great: 

var input = 'const getMessage = (D) => {return D}';
var output = Babel.transform(input, { presets: ['es2015'] }).code;

However, the following generates an error: 

var input = 'const getMessage = (D) => {...D}';
var output = Babel.transform(input, { presets: ['es2015'] }).code;

Error Below

babel.min.js:2 Uncaught SyntaxError: unknown: Unexpected token (1:26)
> 1 | const getMessage = (D) => return {D}
    |                           ^
babel.min.js:2 Uncaught SyntaxError: unknown: Unexpected token (1:27)
> 1 | const getMessage = (D) => {...D}
    |                            ^
    at t.J.raise (babel.min.js:7)
    at t.X.unexpected (babel.min.js:5)
    at te.parseExprAtom (babel.min.js:6)
    at te.parseExprSubscripts (babel.min.js:6)
    at te.parseMaybeUnary (babel.min.js:6)
    at te.parseExprOps (babel.min.js:6)
    at te.parseMaybeConditional (babel.min.js:6)
    at te.parseMaybeAssign (babel.min.js:6)
    at te.parseExpression (babel.min.js:6)
    at t.z.parseStatement (babel.min.js:5)
babel.js:14449 Uncaught SyntaxError: unknown: Unexpected token (1:27)
> 1 | const getMessage = (D) => {...D}
    |                            ^
    at Parser.pp$5.raise (babel.js:14449)
    at Parser.pp.unexpected (babel.js:11756)
    at Parser.pp$3.parseExprAtom (babel.js:13745)
    at Parser.pp$3.parseExprSubscripts (babel.js:13489)
    at Parser.pp$3.parseMaybeUnary (babel.js:13469)
    at Parser.pp$3.parseExprOps (babel.js:13399)
    at Parser.pp$3.parseMaybeConditional (babel.js:13376)
    at Parser.pp$3.parseMaybeAssign (babel.js:13339)
    at Parser.pp$3.parseExpression (babel.js:13301)
    at Parser.pp$1.parseStatement (babel.js:11901)

See my codepen here

The babel-standalone github page states "It's bundled with all the standard Babel plugins and presets," yet it cant seem to transpile my usage of the spread operator

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Chris
  • 5,444
  • 16
  • 63
  • 119
  • 1
    Not a bebel expert, but here's one thing I noticed. `{}` after an arrow function is treated as a function block, not as an implicit return of an object. So your first example is really just creating a function with doesn't return anything. So trying to spread into a function block `{...D}` will give an error. To return an object encase the object in parentheses `const getMessage = (D) => ({...D})` <--- valid syntax – Nick Parsons Jul 04 '19 at 14:49
  • and `(D) => return {D}` should be `(D) => {return D}` – Thomas Jul 04 '19 at 15:09
  • Can you show us your babel configuration, please? Notice that object rest/spread syntax is not part of ES6. – Bergi Jul 04 '19 at 18:52
  • According to the Babel Standalone documentation, "config files don't work in @babel/standalone, as no file system access is available. The presets and/or plugins to use must be specified in the options passed to Babel.transform." https://babeljs.io/docs/en/babel-standalone – Chris Jul 07 '19 at 20:42

0 Answers0