Mdx: Not working when using Babel macros inside mdx files

[billykwok]

Subject of the issue

Throws error when using Babel macro inside MDX files.

Potential cause

Remark's default tokenizer validate its input and final output on block level e.g. check whether a paragraph still exists. However, all import statements of Babel macro are removed after the transformation. This fails the validation.

Your environment

Env: macOS Majave
Package: @mdx-js/loader 1.0.16
Node: 11.14.0
Yarn: 1.15.2

Steps to reproduce

TL;DR
The following file cannot be parsed correctly.

import preval from 'preval.macro';
import _ from 'lodash';

export const macro = preval`module.exports = 1 + 2 - 1 - 1`;
export const nonMacro = _;

# Hello, MDX!

This is an example using webpack

The example repo should be simple enough to understand. But if you want to reproduce the issue yourself, here you go.

1. Clone https://github.com/billykwok/mdx-babel-macro-example
2. Run yarn start

Expected behaviour

The following should be output.

import _ from 'lodash';

export const macro = 1;
export const nonMacro = _;

// Regular MDX output
// ...

Actual behaviour

The following error is printed.

ERROR in ./src/hello.mdx
Module build failed (from ./node_modules/@mdx-js/loader/index.js):
Error: Incorrectly eaten value: please report this warning on https://git.io/vg5Ft
    at validateEat (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/remark-parse/lib/tokenizer.js:147:11)
    at eat (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/remark-parse/lib/tokenizer.js:232:7)
    at nodes.map.node (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/remark-mdx/index.js:111:23)
    at Array.map (<anonymous>)
    at Of.tokenizeEsSyntax (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/remark-mdx/index.js:111:11)
    at Of.tokenize [as tokenizeBlock] (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/remark-parse/lib/tokenizer.js:58:18)
    at Of.parse (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/remark-parse/lib/parse.js:33:20)
    at Function.parse (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/unified/index.js:271:45)
    at pipelineParse (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/unified/index.js:23:16)
    at wrapped (/Users/billykwok/Software/open-source/mdx-webpack-example/node_modules/trough/wrap.js:25:19)
 @ ./src/index.js 3:0-32 4:27-32
ℹ ｢wdm｣: Failed to compile.

[billykwok]

Found that it is completely unrelated to Babel macro. It is just due to the fact the transformSync call in remark-mdx is mistakenly picking up babel config in my project.
Will submit a PR to address.