Module not found: Can't resolve '#minpath' during compilation

[chibeze01]

I'm using @uiw/react-textarea-code-editor in a React project to create a basic HTML code editor. The editor works fine in the component logic, but upon compiling the app, I receive the following error:

📁 Environment

Project type: React (TypeScript)
Code Editor: @uiw/react-textarea-code-editor
Build tool: React Scripts (CRA-based)
OS: Windows 11
Node: v20.18.0
NPM: v10.8.2

🧪 Steps to Reproduce

Install @uiw/react-textarea-code-editor

Use it in a component like this:

<CodeEditor
  value={code}
  language="html"
  placeholder="Please enter HTML code"
  onChange={(evn) => setCode(evn.target.value)}
/>

Run npm start

Compilation fails cannot resolve #minpath error from vfile\lib

✅ What I've Tried

npm update vfile
npm install #minpath

Code Snippet

import React, { useEffect, useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor';

interface IHtmlCodeEditorProps {
    htmlValue: string;
    setHtmlValue: (value: string) => void;
    readOnly?: boolean;
    show?: boolean;
}

export const HtmlCodeEditor = (props: IHtmlCodeEditorProps) => {
    const [code, setCode] = useState(props.htmlValue);

    const handleCodeChange = (newCode: string) => {
        setCode(newCode);
        props.setHtmlValue(newCode);
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
            {props.show && (
                <>

                    <CodeEditor
                        value={code}
                        language="html"
                        placeholder="Please enter HTML code."
                        onChange={(evn) => handleCodeChange(evn.target.value)}
                        padding={15}
                        style={{
                            backgroundColor: "#f5f5f5",
                            fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
                        }}
                    />
                    <pre style={{ overflowY: "auto", whiteSpace: 'pre-wrap', wordWrap: 'break-word', overflow: 'auto' }}>
                        {code}
                    </pre>

                </>
            )}
        </div>
    );
};

[omercotkd]

I also stumbled upon this error, but I was not using "react-textareaa-code-editor" however, what solved it for me was adding the following resolves to my vite.config.ts file

export default defineConfig({
// ... config
  resolve: {
    alias: {
      "#minpath": "./node_modules/vfile/lib/minpath.browser.js",
      "#minproc": "./node_modules/vfile/lib/minproc.browser.js",
      "#minurl": "./node_modules/vfile/lib/minurl.browser.js",
    },
  },
})

Hope some else find it usefull