How to dynamically load markdown files into vue?

Question

I would like to load markdown files like this.

<template>
  <HelloWorld />
</template>

<script setup>
import HelloWorld from './README.md'
</script>

I tried to do it with vite-plugin-md.

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import markdown from 'vite-plugin-md'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/], // <-- here
    }),
    markdown(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

But I got this bug when I run npm run dev:

error when starting dev server:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined

    at new NodeError (node:internal/errors:400:5)
    at exportsNotFound (node:internal/modules/esm/resolve:361:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:641:13)
    at resolveExports (node:internal/modules/cjs/loader:538:36)
    at Module._findPath (node:internal/modules/cjs/loader:607:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1025:27)
    at Module._load (node:internal/modules/cjs/loader:885:27)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)

Answer 1

Actually, I tried your shared code here because it seemed good. It works perfectly: here.

error when starting dev server:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined

The ERR_PACKAGE_PATH_NOT_EXPORTED always indicates a missing imported package. Perhaps you did not install something or it was installed incorrectly?

Please delete the node_modules folder and run the npm run install command again.