SvelteKit项目中为何优先加载@cozemble/model-assembled的CommonJS版本？

我的SvelteKit应用（package.json中type设为module）加载了同时支持CommonJS和ES6格式的@cozemble/model-assembled包，该包又依赖type为module的@cozemble/model-string-ui包，但升级Vite到4.2.0/4.2.1后出现运行时报错，此前使用Vite 4.1.4无此问题。

报错信息 #

Internal server error: require() of ES Module /Users/mikehogan/repos/personal/cozemble/monorepo/model/string/ui/package/index.js from /Users/mikehogan/repos/personal/cozemble/monorepo/model/assembled/dist/cjs/index.js not supported.
Instead change the require of /Users/mikehogan/repos/personal/cozemble/monorepo/model/string/ui/package/index.js in /Users/mikehogan/repos/personal/cozemble/monorepo/model/assembled/dist/cjs/index.js to a dynamic import() which is available in all CommonJS modules.
      at Object.<anonymous> (/Users/mikehogan/repos/personal/cozemble/monorepo/model/assembled/dist/cjs/index.js:4:27)
      at async Promise.all (index 0)
      at async nodeImport (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:54039:21)
      at async eval (/src/lib/MainPanel.svelte:10:31)
      at async instantiateModule (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:9)

相关配置 #

主应用package.json #

{"name": "@cozemble/frontend-main-app","version": "0.0.1","private": true,"type": "module","scripts": {"dev": "vite dev","build": "vite build","preview": "vite preview","check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test": "svelte-check --tsconfig ./tsconfig.json --threshold error"},"devDependencies": {"@originjs/vite-plugin-commonjs": "^1.0.3","@sveltejs/adapter-auto": "^1.0.0","@sveltejs/kit": "^1.0.0","autoprefixer": "^10.4.13","postcss": "^8.4.21","svelte": "^3.54.0","svelte-check": "^3.0.1","tailwindcss": "^3.2.4","tslib": "^2.4.1","typescript": "^4.9.3","vite": "^4.0.0"},"dependencies": {"@cozemble/backend-tenanted-api-types": "workspace:*","@cozemble/data-editor-sdk": "workspace:*","@cozemble/data-paginated-editor": "workspace:*","@cozemble/lang-util": "workspace:*","@cozemble/model-api": "workspace:*","@cozemble/model-assembled": "workspace:*","@cozemble/model-core": "workspace:*","@cozemble/model-editor": "workspace:*","@cozemble/model-event-sourced": "workspace:*","@tailwindcss/typography": "^0.5.9","axios": "^1.2.3","daisyui": "^2.47.0"}}

@cozemble/model-assembled的package.json #

{"name": "@cozemble/model-assembled","version": "1.0.0","main": "dist/cjs/index.js","module": "dist/esm/index.js","files": ["dist/"],"scripts": {"build": "npx tsc -p tsconfig.json && npx tsc -p tsconfig-cjs.json","test": "echo NA"},"devDependencies": {"typescript": "^4.9.3"},"dependencies": {"@cozemble/lang-util": "workspace:*","@cozemble/model-core": "workspace:*","@cozemble/model-string-core": "workspace:*","@cozemble/model-string-ui": "workspace:*","@cozemble/model-reference-core": "workspace:*","@cozemble/model-reference-ui": "workspace:*","@cozemble/model-attachment-core": "workspace:*","@cozemble/model-attachment-ui": "workspace:*"}}

@cozemble/model-string-ui的package.json #

{"name": "@cozemble/model-string-ui","version": "0.0.1","svelte": "./package/index.js","module": "./package/index.js","main": "./package/index.js","types": "./package/index.d.ts","type": "module","scripts": {"dev": "vite dev","build": "svelte-kit sync && svelte-package","prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1","check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test": "svelte-check --tsconfig ./tsconfig.json --threshold error"},"devDependencies": {"@sveltejs/adapter-auto": "^1.0.0","@sveltejs/kit": "^1.0.0","@sveltejs/package": "^1.0.0","svelte": "^3.54.0","svelte-check": "^2.9.2","tslib": "^2.4.1","typescript": "^4.9.3","vite": "^4.0.0"},"dependencies": {"@cozemble/model-core": "workspace:*","@cozemble/model-api": "workspace:*","@cozemble/model-string-core": "workspace:*","@cozemble/model-editor-sdk": "workspace:*","@cozemble/data-editor-sdk": "workspace:*"}}

版本信息：@sveltejs/kit:1.14.0，vite:4.2.1

Vite 4.2.x在模块解析逻辑上做了调整，对于monorepo中的本地包，优先读取了main字段指向的CommonJS版本，而非module字段的ES模块版本。

具体逻辑：

• 主应用是type: module，理论上应优先加载依赖的ES模块版本，但Vite 4.2.x的解析策略变化导致它选择了@cozemble/model-assembled的CJS版本。
• @cozemble/model-string-ui是纯ES模块（type: module），CJS模块无法用require()加载ES模块，因此触发报错。

1. 强制Vite优先加载ES模块版本
   在主应用的vite.config.js中添加配置，指定@cozemble/model-assembled优先使用ES模块：

export default {
  optimizeDeps: {
    include: ['@cozemble/model-assembled'],
    esbuildOptions: {
      resolveExtensions: ['.js', '.mjs']
    }
  }
}

2. 调整@cozemble/model-assembled的package.json字段顺序
   将module字段放在main字段前面，部分模块解析器会优先读取靠前的字段：

{
  "name": "@cozemble/model-assembled",
  "version": "1.0.0",
  "module": "dist/esm/index.js",
  "main": "dist/cjs/index.js",
  // ...其他配置
}

3. 为@cozemble/model-assembled添加exports字段
   使用更明确的条件导出，确保ES模块环境加载正确版本：

{
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js"
    }
  },
  // ...其他配置
}

4. 回退到Vite 4.1.4
   如果暂时无法调整包配置，可锁定Vite版本为4.1.4，在package.json中指定：

"devDependencies": {
  "vite": "4.1.4"
}

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