yarn-build reports a vfile problem

[hobin2017]

package.json

{
  "dependencies": {
    "react-markdown": "^9.0.1",
    "antd": "^4.24.0",
    "less": "^4.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3"
  },
  "devDependencies": {
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.0"
  }
}

react

the ReactMarkdown component is wrapped in a new class. and this class is imported by React.lazy method.
src/render_md.tsx

import * as React from 'react'
import ReactMarkdown from 'react-markdown'

export class RenderMarkdown extends React.Component<{}, {}> {
  render() {
    return (
      <div
        style={{
          height: 300,
          overflowY: 'scroll',
        }}
      >
        <ReactMarkdown>
          {"# title"}
        </ReactMarkdown>
      </div>
    )
  }
}

export default 

App.tsx

import * as React from 'react'

function App() {
  const DynamicComponent = React.lazy(() => import("@/render_md"))
  return (
      <React.Suspense fallback={<div>loading component</div>}>
        <DynamicComponent />
      </React.Suspense>
  )
}

export default App

problem

[vite]: Rollup failed to resolve import "#minpath" from "node_modules/vfile/lib/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

After adding external: ['vfile'] in vite.config.ts, the yarn-build problem is gone but another error appears in the chrome:

Uncaught TypeError: Failed to resolve module specifier "vfile". Relative references must start with either "/", "./", or "../".

[remcohaszing]

You’re using an old version of Vite. Update your dependencies.