[react-markdown] Uncaught ReferenceError: process is not defined

[bmakan]

Using webpack 5 and react-markdown v7 I keep getting Uncaught ReferenceError: process is not defined in the browser and the app keeps crashing. Tried several different solutions described in StackOverflow and none worked.

For a React library there's too much stuff being imported from node. At the very least there should be a guide or warning on how to set up bundlers if it's out of your control (e.g. the assert issue from #831). None of the other libraries I use gave me such headaches.

In the end, I had to downgrade to 6.x.x for the error to go away.

[wooorm]

Please explain in more detail what code you are using and what the error is

[wooorm]

Are you using other tools than webpack?

[bmakan]

This is the line causing the issue:

if (process.env.NODE_DEBUG) {...}

So, something is using the util.js and which is in turn accessing the node's process module. It should be an env variable, but I am unsuccessful in defining it in any way.

[wooorm]

util is a polyfill for a builtin node module. For some reason your build setup is polyfilling that, but not process.
Nothing react-markdown uses, uses process.env.NODE_DEBUG. React does, however.

[bmakan]

Are you using other tools than webpack?

Typescript, babel, some webpack loaders. But the issue only started once I installed, imported and tried to render the ReactMarkdown component.

[bmakan]

I was able to get it to work by installing process as dev dependency and including it via ProvidePlugin. Weird thing is, I already tried this before. Maybe I had to stop and relaunch the webpack since I use the --watch option.

Install process as dev dependency:
npm i -D process

Update webpack.config:

const { ProvidePlugin } = require('webpack');

...
// webpack.config
plugins: [
    new ProvidePlugin({
         'process/browser',
    }),
],
...