[react-markdown] Cannot compile with webpack 5

[nikhilDigiplusIT]

Affected packages and versions
7.1.0

Steps to reproduce
Set webpack configuration as here.

Build with webpack 5.

Expected behavior
Compiled without errors.

Actual behavior
Got errors below:

ERROR in ./node_modules/uvu/node_modules/kleur/index.mjs 4:11-18
Module not found: Error: Can't resolve 'process/browser' in '/Users/sowicm/repos/monoweb/packages/web/node_modules/uvu/node_modules/kleur'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Solutions that I tried which didn't work

1. Added process/browser to the webpack plugins
   new webpack.ProvidePlugin({ process: 'process/browser', })

[ChristianMurphy]

@nikhilDigiplusIT did you try the suggestion noted in the error message?

BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '.mjs' file or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Implies that changing

- new webpack.ProvidePlugin({ process: 'process/browser', })
+ new webpack.ProvidePlugin({ process: 'process/browser.js', })

may work

[wooorm]

(hiding the above misunderstanding to help future folks find the solution!)

[keslo]

It's work! Thanks

[ashleydavis]

This is still an issue for me.

I've prepared a simplified version of my setup to show the issue:

https://github.com/ashleydavis/react-markdown-with-webpack-5

I've tried both new webpack.ProvidePlugin({ process: 'process/browser', }) and new webpack.ProvidePlugin({ process: 'process/browser.js', }).

[ashleydavis]

I'm using the latest React-markdown and Webpack as of today.

[ashleydavis]

This is the result I'm getting in the browser:

Can anyone else confirm if this is still a problem for them?

Here's the example, just clone and run npm install and npm start and you should see the problem:

https://github.com/ashleydavis/react-markdown-with-webpack-5

I'm using Node.js v16.14.0

[whinc]

I have the same problem and can't sovle it acoording to the solution above. I have to rollback to version 6.x to solve the problem.

[ashleydavis]

There is an example here that shows how to use React-markdown v8.0.3 with Webpack 5:
https://github.com/ashleydavis/react-markdown-with-webpack-5

[ashleydavis]

Did you try my example code:
https://github.com/ashleydavis/react-markdown-with-webpack-5

Does that work for you?

[whinc]

@ashleydavis
I use icejs as build tool and cannot apply your solution. I sovle this problem finally with a stupid way on react-markdown@^8.

1. first install polyfill 'process'

npm i process

2. modify node_modules: add one line to the top of the problem file node_modules/uvu/node_modules/kleur/index.mjs
   

compile pass!

[mizi-lin]

webpack 5 add rule

 {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto',
            resolve: {
                fullySpecified: false
            }
        }