Vue中动态加载Markdown文件报错：ERR_PACKAGE_PATH_NOT_EXPORTED求助

问题场景 #

想要通过以下方式将Markdown文件作为Vue组件导入：

<template>
  <HelloWorld />
</template>

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

使用vite-plugin-md配置后，运行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)

解决方法 #

1. 重新安装适配版本的vite-plugin-md #

该错误大概率是依赖版本不兼容导致的，先卸载现有包再安装最新版：

npm uninstall vite-plugin-md
npm install vite-plugin-md --save-dev

2. 修正Vite配置文件 #

原配置中不需要在vue插件的include里添加.md后缀，因为vite-plugin-md会负责将Markdown转译为Vue组件，调整后的配置如下：

// 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'

export default defineConfig({
  plugins: [
    vue(),
    markdown() // 可根据需求添加配置，比如wrapperComponent、markdownItOptions等
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

3. 验证Node.js版本 #

确保使用Node.js 16.x及以上版本，旧版本对ES模块的导出处理可能存在兼容性问题，导致该错误出现。

4. 确认Markdown文件格式 #

Markdown文件可直接写普通文本，也可以嵌入Vue组件，示例如下：

# 这是Markdown组件
这里可以写常规的Markdown内容

<MyComponent />

<script setup>
import MyComponent from './MyComponent.vue'
</script>

完成以上步骤后，重新运行npm run dev即可正常导入Markdown文件作为Vue组件使用。

内容的提问来源于stack exchange，提问作者Chiara Ani