wooorm / xdm

Just a *really* good MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins
http://wooorm.com/xdm/
MIT License
595 stars 18 forks source link

How to get import statements detected? #37

Closed silvenon closed 3 years ago

silvenon commented 3 years ago

When I install xdm as a dependency, running the following:

xdm.compileSync(`import foo from 'foo'`)

interprets the import statement as text:

/*@jsxRuntime automatic @jsxImportSource react*/
import {Fragment as _Fragment, jsx as _jsx} from "react/jsx-runtime";
function MDXContent(_props) {
  const _components = Object.assign({}, _props.components), {wrapper: MDXLayout} = _components;
  const _content = _jsx(_Fragment, {
    children: "import foo from 'foo'"
  });
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, _props, {
    children: _content
  })) : _content;
}
export default MDXContent;

But the same thing works fine inside the xdm repo! 😅

/*@jsxRuntime automatic @jsxImportSource react*/
import {Fragment as _Fragment, jsx as _jsx} from "react/jsx-runtime";
import foo from 'foo';
// ...

Any ideas why? 🙏

I'm using the latest xdm, 1.7.0.

ChristianMurphy commented 3 years ago

The logic for parsing ESM imports and exports lives in https://github.com/micromark/micromark-extension-mdxjs-esm From https://github.com/micromark/micromark-extension-mdxjs-esm/blob/c1b0734136b3d954f56c3384361b6bb4e17698b9/test.js#L315-L321 it appears this should be supported :thinking:

wooorm commented 3 years ago

I'm guessing you have an older version of mdx-js/mdx in there too. It uses locked versions of dependencies, whereas xdm uses wide ranges (I think the problem is specifically mdast-util-to-hast through remark-rehype). So, u installing that, reinstalling, should do the job!

wooorm commented 3 years ago

Fix deployed!

silvenon commented 3 years ago

It works, awesome! 🎉