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

[dmytro-grablov]

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

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]

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

[dmytro-grablov]

Actually yes, we migrated to vue3 without compat.