Unexpected token error

[Tauren Mills]

I'm getting an error in the browser when using MDXC. This is the error:

readme.md:14  Uncaught SyntaxError: Unexpected token )

I think this is because of the trailing comma, where p has a missing 3rd argument:

p({},
  "This is the About page",
),

Here is the full transpiled code for readme.md:

import React, { createElement, createFactory } from 'react'

export default function({ factories={} }) {
  const {
    wrapper = createFactory('div'),
    h2 = createFactory('h2'),
    p = createFactory('p'),
  } = factories

  return wrapper({},

p({},
  "This is the About page",
),
h2({"id": "Section-1"},
  "Section 1",
),
p({},
  "Text about section",
),
h2({"id": "Section-2"},
  "Section 2",
),
p({},
  "Text about section",
)

  )
}

export const meta = {}


//////////////////
// WEBPACK FOOTER
// ./src/lab/app/About/readme.md
// module id = ./src/lab/app/About/readme.md
// module chunks = 0

I'm using the basic webpack config shown in the readme:

    { test: /\.mdx?$/,
      use: [
        'babel-loader',
        'mdx-loader',
      ]
    },

Lastly, here is the original markdown:

This is the About page

## Section 1

Text about section

## Section 2

Text about section

[James K Nelson]

Trailing commas in function calls are part of ES2017 -- they should be supported in recent browsers, but if not, you can remove them using babel. The relevant package is "babel-plugin-syntax-trailing-function-commas".

[Tauren Mills]

I ran the app in Chrome Canary, and it worked fine, so it does look like the trailing commas are the problem.

However, I'm targeting the current stable version of Chrome (57), and trailing commas isn't supported in it without setting a flag: http://kangax.github.io/compat-table/es2016plus/

I'm using babel-preset-env with the following browser config. I would have thought this would take care of the proper transpilation.

  [
            'last 2 Chrome versions',
            'last 2 Firefox versions',
            'last 2 Edge versions',
            'last 2 Opera versions',
            'last 2 Safari versions',
            'last 2 iOS versions'
  ]

I added babel-plugin-syntax-trailing-function-commas as you suggested, but got the same output. It didn't seem to do anything.

[Tauren Mills]

It appears that babel-plugin-syntax-trailing-function-commas no longer does anything:
https://github.com/babel/babylon/blob/master/CHANGELOG.md#691-2016-08-23

Besides, if I understand correctly, that plugin was to enable the parser to understand ES2017. What I don't understand is why the code is not being transformed to remove the trailing commas.

[James K Nelson]

Unfotunately I'm not able to reproduce this. Could you try cloning https://github.com/jamesknelson/sitepack-react-starter-kit and see if that works? (It uses MDX under the hood). Also, could you let me know what OS you're on?

[James K Nelson]

I've managed to reproduce this on Chrome 57 with sitepack-react-starter-kit. It turns out I had the experimental features flag turned on -- needless to say, now I feel pretty stupid.

Will update again once I've got a solution.

[James K Nelson]

Have fixed this in the latest version of sitepack-react-starter-kit -- there was a bug in sitepack. But I'm still not able to see how this error would be occuring if you're using mdx-loader, and not sitepack-mdx-page-loader. Going to close this for the moment as I don't think it is an issue with mdxc.