How to get import statements detected?

[silvenon]

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]

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 🤔

[wooorm]

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]

Fix deployed!

[silvenon]

It works, awesome! 🎉