Can't resolve 'path'

[alishefaee]

This package is not working. it gives this error when import ReactMarkdown from "react-markdown":
ERROR in ./node_modules/replace-ext/index.js 3:11-26
Module not found: Error: Can't resolve 'path' in 'H:\Projects\ReactPro\react2\node_modules\repla
ce-ext'

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/core.js 4:14-36
@ ./node_modules/vfile/index.js 4:12-32
@ ./node_modules/unified/index.js 8:12-28
@ ./node_modules/react-markdown/lib/react-markdown.js 5:14-32
@ ./app/components/ViewSinglePost.js 6:0-43 67:38-51
@ ./app/Main.js 17:0-57 83:40-54

ERROR in ./node_modules/vfile/core.js 3:11-26
Module not found: Error: Can't resolve 'path' in 'H:\Projects\ReactPro\react2\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 4:12-32
@ ./node_modules/unified/index.js 8:12-28
@ ./node_modules/react-markdown/lib/react-markdown.js 5:14-32
@ ./app/components/ViewSinglePost.js 6:0-43 67:38-51
@ ./app/Main.js 17:0-57 83:40-54

webpack 5.1.3 compiled with 2 errors in 3178 ms

`import React, { useEffect, useState } from "react"
import Page from "./Page"
import { useParams, Link } from "react-router-dom"
import Axios from "axios"
import LoadingDotsIcon from "./LoadingDotsIcon"
// import ReactMarkdown from "react-markdown"
import ReactTooltip from "react-tooltip";

function ViewSinglePost() {
    const { id } = useParams()
    const [isLoading, setIsLoading] = useState(true)
    const [post, setPost] = useState()
    useEffect(() => {
        const ourRequest = Axios.CancelToken.source()
        async function fetchPost() {
            try {
                const response = await Axios.get(`/post/${id}`, { cancelToken: ourRequest.token })
                setPost(response.data)
                setIsLoading(false)
            } catch (e) {
                console.log("There was a problem or the request was cancelled.")
            }
        }
        fetchPost()
        return () => {
            ourRequest.cancel()
        }
    }, [])

    if (isLoading)
        return (
            <Page title="...">
                <LoadingDotsIcon />
            </Page>
        )

    const date = new Date(post.createdDate)
    const dateFormatted = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`

    return (
        <Page title={post.title}>
            <div className="d-flex justify-content-between">
                <h2>{post.title}</h2>
                <span className="pt-2">
          <a href="#" className="text-primary mr-2" title="Edit">
            <i className="fas fa-edit"></i>
          </a>
          <a className="delete-post-button text-danger" title="Delete">
            <i className="fas fa-trash"></i>
          </a>
        </span>
            </div>

            <p className="text-muted small mb-4">
                <Link to={`/profile/${post.author.username}`}>
                    <img className="avatar-tiny" src={post.author.avatar} />
                </Link>
                Posted by <Link to={`/profile/${post.author.username}`}>{post.author.username}</Link> on {dateFormatted}
            </p>

            <div className="body-content">
                <ReactMarkdown source={post.body} allowedTypes={["paragraph", "strong", "emphasis", "text", "heading", "list", "listItem"]} />
            </div>
        </Page>
    )
}

export default ViewSinglePost`

[ChristianMurphy]

The answer is in the log 🙂

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.

path is a part of vFile and likely will continue to be (see #16)
To resolve this, webpack 5 needs to be told to shim path, see #38 (comment) and #38 (comment) for examples of how shimming can be done.

[ChristianMurphy]

Some additional context for people interested in why path, fs, or other Node specific packages are not removed yet.
vFile and Unified supports both usage in Node and Browser (through build tools).

Browsers and Node are in the process of increasing converging on APIs.
Node has added URL and ESM, Chrome is working on FUGU which brings more native APIs to the browser.
The effort to align Node and Browsers still has a long way to go, many of the APIs are experimental or still stabilizing, and there isn't a clear migration path yet.

vFile and Unified as a whole is waiting for the migration path to become more clear, rather than rushing to remove APIs and implement new APIs before they've fully converged and stabilized, which would risk putting adopters through multiple rounds of breaking changes.
Please be patient, and cognizant of all the factors that go into maintaining a library, the minor inconvenience polyfilling now, can save pain of dealing with breaking changes and unstable APIs long term.

vFile and Unified will continue to follow process towards Node and Browser convergence with an eye towards simplifying usage on both platforms, and discussions on a path toward a stable and minimally breaking migration are welcome at https://github.com/unifiedjs/rfcs

[ChristianMurphy]

A tentative work around https://github.com/vfile/vfile/releases/tag/4.2.1