在vite.config.ts导入monorepo包时出现Unexpected token 'export'错误

核心原因 #

vite.config.ts 是直接由 Node.js 环境执行的，而 Node.js 默认采用 CommonJS 模块规范。你导入的 yep-ui 包输出的是 ES 模块（使用了 export 语法），Node.js 在未做配置的情况下无法识别 ES 模块语法，因此抛出 SyntaxError: Unexpected token 'export'。

而 App.vue 中的代码是经过 Vite 构建流程处理的：Vite 会将 ES 模块转译为浏览器可识别的代码，所以能正常导入使用。

解决方案 #

方案1：让 Node.js 将 vite.config.ts 当作 ES 模块处理

• 在 playground 目录的 package.json 中添加 "type": "module"，这样该目录下的 .ts 文件会被 Node 当作 ES 模块解析
• 或者直接将 vite.config.ts 重命名为 vite.config.mts，后缀 mts 会强制 Node 将其视为 ES 模块

方案2：为 monorepo 包配置双模块输出

在 yep-ui 的 package.json 中同时指定 CommonJS 和 ES 模块入口：

{
  "main": "./dist/yep-ui.cjs.js",
  "module": "./dist/yep-ui.es.js",
  "exports": {
    ".": {
      "require": "./dist/yep-ui.cjs.js",
      "import": "./dist/yep-ui.es.js"
    }
  }
}

这样 Node.js（CommonJS 环境）会自动读取 require 对应的入口，Vite（ES 模块环境）会读取 import 对应的入口，两边都能正常工作。

方案3：使用动态导入（临时 workaround）

如果不想修改配置，可以在 vite.config.ts 中用动态导入的方式加载包：

export default async () => {
  const { default: YepUI } = await import('yep-ui')
  // 后续使用 YepUI 的逻辑
  return {
    // vite 配置项
  }
}

动态导入在 Node.js 的 CommonJS 环境中是支持的，能避开直接导入 ES 模块的语法错误。

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