Using react-markdown with Webpack 5 is not possible as path dependency/polyfill is missing

[ceisele-r]

Subject of the issue

After upgrading a project using react-markdown to Webpack 5, webpack compile fails because a polyfill for path is missing.
The reason for this is that webpack 5 does no longer automatically include polyfills for core node modules.

The affected dependency tree results from

ERROR in ./node_modules/vfile/core.js 3:11-26
Module not found: Error: Can't resolve 'path' in 'C:\app\node_modules\vfile'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./node_modules/vfile/index.js 5:12-32
 @ ./node_modules/unified/index.js 15:12-28
 @ ./node_modules/react-markdown/lib/react-markdown.js 5:14-32
 @ ./src/vendor.js 164:0-25
 @ dll vendor vendor[0]

There is an issue for the underlying issue in vfile where a recent comment references the same issue ( vfile/vfile#16 (comment) ) where it seems that setting up unified to be able to run in browser now with Webpack 5 is not straightforward.

=> As a result it means that react-markdown is not able to be used in react projects with webpack 5 easil. Therefore, I'm creating this issue here.
If changing dependencies (to avoid the dependency tree to the path dependency) is not an option, I think somewhere in the docs should be documented how to use react-markdown with Webpack 5.

Your environment

• OS: Windows
• Packages: react-markdown 5.0.2
• Env: Webpack 5.6.0, node 12.19.0

Steps to reproduce

1. Use existing react project with webpack 4 and react-markdown
2. Update to webpack 5
3. Compile webpack

Expected behavior

react-markdown is frontend-compatible and works without further modifications to dependencies / webpack polyfills with webpack 5.

Actual behavior

See above.

[ChristianMurphy]

Duplicate of vfile/vfile#57 (comment)
You can find resolutions at vfile/vfile#57 (comment)

[evenfrost]

FWIW, fixed with

npm i path-browserify

and adding to the webpack config:

module.exports = {
    resolve: {
        fallback: { 'path': require.resolve('path-browserify') },
    },
};

[ChristianMurphy]

Also see https://github.com/vfile/vfile/releases/tag/4.2.1 which offers an alternative to polyfilling path