React-markdown: Uncaught ReferenceError: process is not defined

[ericsoco]

I recently updated my app to 4.2.2 (from an old, 2.x version) and am seeing an NPE on process when attempting to render a <ReactMarkdown>.

It appears that ReactMarkdown calls unified.parse(), which in turn instantiates a VFile, which accesses process, but process is not available in a browser.

It is easy enough to reproduce (for me) that I'm surprised others haven't reported it, so I'm guessing there's something unique in my setup that is triggering this. Still debugging, but am I correct to assume that this codepath shouldn't be running in the browser?

Will add more information as I dig it up.

[ericsoco]

It turns out that process is mocked by default by Webpack. Browserify does something similar.

The bug here is really with unified/vfile, so I've also filed it there:
https://github.com/vfile/vfile/issues/38

but note that this issue renders react-markdown effectively unusable in environments that don't mock/polyfill process.

[Colkadome]

I have a similar issue. Requiring unified/vfile is a bit tricky here, as they both use node.js functions so things like process need to be explicitly shimmed in for some build tools. If this project is to be browser compatible, you could fork unified/vfile and replace the node.js-dependant functions (like is-plain-obj, path.dirname) with custom ones (there aren't many of them).

[AmirTugi]

Having the same results :(
Can't use this lib because of this.
Bummer

[flybayer]

The solution is to set this in your webpack config:

webpackConfig.node.process = true;

[shengliangli]

webpack v5,same thing happend.

[Falci]

Workaround:

window.process = { cwd: () => '' };

[greybax]

@flybayer solution doesn't work for me

@Falci where to put this code?
I've tried something like:

plugins: [
    new webpack.DefinePlugin({
      'windows.process': { cwd: () => '' },
    })
  ],

but it doesn't work for me

P.S. downgraded to version 2.5.1. This version works for me without any additional tweaks in webpack config

[Falci]

@greybax I'm using like this:

import React from 'react';
import ReactMarkdown from 'react-markdown/with-html';

window.process = { cwd: () => '' };

const MyComponent = ({data}) => (
    <LayoutWrapper>
        <ReactMarkdown source={data} escapeHtml={false} />
    </LayoutWrapper>
)

[govizlora]

A temporary solution for me: https://github.com/vfile/vfile/issues/38#issuecomment-683198538

[ChristianMurphy]

This is in vfile, not in react-markdown itself.
See the suggestion @govizlora linked

[zjjjjjjjjjjd]

module.exports = {
  module: {
    rules: [
      {
        test: /node_modules(\/|\\)vfile(\/|\\)core\.js/,
        use: [{
          loader: 'imports-loader',
          options: {
            type: 'commonjs',
            imports: ['single process/browser process'],
          },
        }],
      },
    ],
  },
};