@vue/compat does not provide mjs bundle - won't work for Vue Ssr es modules project

dmytro-grablov commented 1 year ago

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-c6hzkv?file=vite.config.js

Steps to reproduce

start the app with npm run dev and see that the page can be loaded successfully

kill the app, start it again with npm run prod, reload the page and see that rendering failed, because the app failed to import something from the compat module:

on my local env it is


file:///Users/dgrablov/repos/vite-ssr-test/dist/server/chunks/chunk-97a3fbb4.js:1
import { inject } from "@vue/compat/dist/vue.cjs.prod.js";
 ^^^^^^
SyntaxError: Named export 'inject' not found. The requested module '@vue/compat/dist/vue.cjs.prod.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@vue/compat/dist/vue.cjs.prod.js'; const { inject } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

  - on stackblitz it is

file:///home/projects/vitejs-vite-c6hzkv/dist/server/entries/renderer_default-page-server.mjs:4 import { useSSRContext, mergeProps, unref, withCtx, createTextVNode, createSSRApp, h } from "@vue/compat/dist/vue.esm-bundler.js"; ^^^^^^^^^^^^^ SyntaxError: The requested module '@vue/compat/dist/vue.esm-bundler.js' does not provide an export named 'useSSRContext' at async pageFile.loadFile (file:///home/projects/vitejs-vite-c6hzkv/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/parseGlobResults.js:35:40) at async Promise.all (index 1) at async loadPageFiles (file:///home/projects/vitejs-vite-c6hzkv/node_modules/vite-plugin-ssr/dist/cjs/node/runtime/renderPage/loadPageFilesServerSide.js:89:5) at async Promise.all (index 0)


- kill the app
- perform `cp node_modules/@vue/compat/dist/vue.esm-bundler.js node_modules/@vue/compat/dist/vue.esm-bundler.mjs`
- update import substitution in `vite.config.js` accordingly
- restar the app in production mode and see that the page now can be loaded without problems

### What is expected?

For the SSR app, where server side rendering is occurring in node environment, the library can be loaded even if `"type": "module"` is set in _package.jsion_

### What is actually happening?

Application fails in runtime, unable to perform an import from compat library, since it is treated as cjs bundle

### System Info

```shell
System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    vue: 3.3.4 => 3.3.4

Any additional comments?

No response

zwacky commented 6 months ago

running into the same issue. did you find a solution to this?

dmytro-grablov commented 6 months ago

Actually yes, we migrated to vue3 without compat.

vuejs / core