javascriptecmascript-6babeljsmodule-patternrevealing-module-pattern

Babelifying JavaScript Module Pattern with ES6 Arrow Functions


Babel is choking on code that uses the module pattern with an arrow function.

If I try to process a file which reads:

const lib = (() => {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
}());

Babel gives a SyntaxError

{ SyntaxError: /home/david/Sync/ebs/office/fake.js: Unexpected token, expected "," (9:1)

   7 |     mult
   8 |   };
>  9 | }());
     |  ^
  10 | 
    at Parser.raise (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:3939:15)
    at Parser.unexpected (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5248:16)
    at Parser.expect (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5236:28)
    at Parser.parseParenAndDistinguishExpression (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:6454:14)
    at Parser.parseExprAtom (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:6284:21)
    at Parser.parseExprSubscripts (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5924:21)
    at Parser.parseMaybeUnary (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5903:21)
    at Parser.parseExprOps (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5812:21)
    at Parser.parseMaybeConditional (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5784:21)
    at Parser.parseMaybeAssign (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5731:21)
  pos: 137,
  loc: Position { line: 9, column: 1 },
  code: 'BABEL_PARSE_ERROR' }

However, if I change the code to use an older style function, like

const lib = (function () {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
}());

Babel seems to process the file with no issues.

What am I doing wrong? Is there a genuine syntax problem with the arrow function code I am not aware of?


Solution

  • Try moving your paren inside, like this:

    })();
    

    const lib = (() => {
      function sum(a, b)  { return a + b; }
      function mult(a, b) { return a * b; }
    
      return {
        sum,
        mult
      };
    })();
    console.log(lib)

    In ES6, an arrow function basically consists of the following three components:

    () => {}
    

    So in order to invoke it immediately it should be wrapped in parentheses and then called, like this:

    const lib = (() => {
        //do something
    })();