runtime issue - _convertSourceMap(...).default.removeComments is not a function

Subject of the issue

I’m trying to use latest version of runtime using example code and the runtime seems completely broken in V1 (1.0.0-rc.0 seemed to work with warnings but still).

import React from 'react';
import MDX from '@mdx-js/runtime';

// Provide custom components for markdown elements
const components = {
  // eslint-disable-next-line jsx-a11y/heading-has-content
  h1: props => <h1 style={{ color: 'tomato' }} {...props} />,
};

// Provide custom components that will be referenced as JSX
// in the markdown string
const scope = {
  Demo: () => <h1>This is a demo component</h1>,
};

const mdx = `
# Hello, world!

<Demo />
`;

export default () => (
  <MDX components={components} scope={scope}>
    {mdx}
  </MDX>
);

Uncaught TypeError: _convertSourceMap(...).default.removeComments is not a function error get’s thrown.

Your environment

• macOS
• "@mdx-js/runtime": "^1.0.9",, "@mdx-js/mdx": "^1.0.9",

Steps to reproduce

Just try to use the runtime (repo)

---

Also v1 seemed to introduce an error warning: (repo)

this prevents runtime from being used in gatsby-netlify-cms - https://github.com/gatsbyjs/gatsby/issues/10326

P.S. would you accept a MR with tests for runtime? As I’m developing a netlify-cms-widget-mdx, I very much depend on the stability and consistency of the runtime, so I would gladly chip in.

[johno]

👋 @karlsander

I’ve opened up a new issue which can be centered around figuring out how to best get a more runtime-friendly implementation. It’s something that it’s definitely worth doing, though I’m not sure if that means moving to @babel/standalone or offering our own standalone package.

Maybe we could figure out a solution in the near future!

[karlsander]

I don’t like to be an unhelpful +1 person, but I would really love to see this fixed and I think it’s beyond me to do it. A stable @mdx-js/runtime could enable a lot of neat tooling around mdx, like dedicated editors, and support prototyping more out-of-the-box ideas (like rendering in Framer X and react native).

I took a try at hacking together some kind of dirty fix, shimming fs in the rollup bundling, because I REALLY wanted to try it in Framer X, but I couldn’t figure anything out.

What would moving to babel standalone involve? Or do you have any pointers for a hacky fix?