使用Vite 4.3.9报Uncaught SyntaxError: ambiguous indirect export: default错误

问题根源 #

你的代码存在两个核心问题导致报错：

1. 浏览器环境不支持Node.js核心模块：fs和path是Node.js专属API，浏览器没有这些模块，直接在前端代码中使用会导致Vite依赖解析混乱，进而触发导出歧义错误。
2. remark系列库的导入兼容性：部分版本的remark和remark-html默认导出的模块格式与Vite的ES模块解析逻辑不兼容，导致导出识别异常。

具体修复步骤 #

1. 调整依赖导入方式

将remark和remark-html的默认导入改为命名导入，适配ES模块规范：

// 替换原导入语句
import { remark } from 'remark';
import { html } from 'remark-html';

2. 重构逻辑，移除浏览器不支持的Node.js API

前端代码无法直接读取本地文件，推荐两种替代方案：

方案一：静态导入markdown文件（适合固定内容）

用Vite提供的import.meta.glob静态导入content目录下的所有markdown文件，无需依赖Node.js模块：

import { remark } from 'remark';
import { html } from 'remark-html';

// 静态匹配content目录下的所有md文件，以原始文本形式导入
const markdownFiles = import.meta.glob('/content/*.md', { as: 'raw' });

const getContentBySlug = async (slug) => {
  // 动态加载对应slug的markdown文件
  const getFile = markdownFiles[`/content/${slug}.md`];
  if (!getFile) throw new Error(`No content found for slug: ${slug}`);
  
  const fileContent = await getFile();
  const processedContent = remark().use(html).processSync(fileContent);
  return processedContent.toString();
};

export default { getContentBySlug };

方案二：后端接口提供解析后的内容（适合动态内容）

如果你的markdown内容需要动态更新或从外部源获取，建议把markdown解析逻辑放到后端：

• 后端编写接口接收slug参数，读取对应md文件并解析为HTML后返回
• 前端通过fetch调用该接口获取结果，完全避开Node.js模块在浏览器的使用

3. 验证导入方式

确保导入该工具模块的代码使用默认导入：

import markdownUtils from '@/utils/markdown.jsx';

如果用命名导入（如import { getContentBySlug } from '@/utils/markdown.jsx'）会和默认导出冲突，也可能触发类似错误。

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