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

[karolis-sh]

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 - gatsbyjs/gatsby#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]

Hmmm, yeah looks like babel introduced some runtime breakage. I think we need to stub the fs module in the runtime.

We'd happily accept a PR with tests for runtime. Apologies it's been so unstable/flaky! 😬

[lottamus]

This can be fixed by adding a mock via your webpack config:

node: {
  fs: 'empty'
}

Check out https://webpack.js.org/configuration/node/#other-node-core-libraries

[karolis-sh]

Tried "@mdx-js/runtime": "^1.0.15", and by adding

  node: {
    fs: 'empty',
  },

removes both warnings, and runtime actually starts working. Thought in environments where you can't modify the webpack (e.g. netlify cms), it breaks as described in the issue 😕

[johno]

I've added docs for those that can modify the webpack config to work in the browser. For a full fix we'll need to investigate using Babel standalone.

[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?

[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!