Can ReactMarkdown be used with react-lazy-load?

[hobin2017]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

"react-markdown": "^9.0.1"

Link to runnable example

No response

Steps to reproduce

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 RenderMarkdown

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

Expected behavior

no extra config in vite.config.ts

Actual behavior

[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 "../".

Runtime

Node v16

Package manager

yarn 1

OS

Linux

Build and bundle tools

Vite

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[wooorm]

This is also a duplicate of https://github.com/orgs/remarkjs/discussions/1356