@vue/compat does not provide mjs bundle - won't work for Vue Ssr es modules project
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