Vue3 Server renderer not resolving aliases to external component library
Vue version
vue 3.2.45
Link to minimal reproduction
https://github.com/mikimoresi/localAndMainVue3SSR
Steps to reproduce
Dear Sirs, I'm trying to convert my Frontend framework based on vue 2.7 to vue 3, all was fine till I tried to implement SSR functionalities.
My projects are all made of 2 repositories, one (the local) for very few local configs and one (the main) with almost all the stuff needed for the project to run: components, store, structure, functions etc etc.
I have used aliases to grab resources from the right location, the child project use almost everything from the main by importing through aliases, for example : import niceComponent from @main/components/niceComponent.vue
For this specific structure i'm now really struggling with an SSR Vite error.
I'm using the vite provided vue3 example as a development guide (https://github.com/vitejs/vite/tree/main/playground/ssr-vue)
Here you can find a test repo that reproduce the problem: localAndMainVue3SSR
In short: in localAndMainVue3SSR/local_repo/src/main.js at line 4
you can see this code:
import App from '@main/App.vue' //not working
//import App from './App.vue' //working
What is expected?
I would expect the alias @main to be resolved normally.
What is actually happening?
what is happening is that App.vue is the same exact file but in different locations, by using the @main alias I'm importing it from main_repo dir and in this case I'm facing this error, that i find really hard to debug or understand:
[Vue warn]: inject() can only be used inside setup() or functional components. [Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build. [Vue warn]: Unhandled error during execution of setup function at <App> TypeError: Cannot read property 'modules' of undefined at _sfc_main.setup (/@fs/Users/michelemoresi/Desktop/REPOSITORIES/VUE/ocalAndMainVue3SSR/main_repo/App.vue:70:16) at callWithErrorHandling (/Users/michelemoresi/Desktop/REPOSITORIES/VUE/ocalAndMainVue3SSR/local_repo/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22) at setupStatefulComponent (/Users/michelemoresi/Desktop/REPOSITORIES/VUE/ocalAndMainVue3SSR/local_repo/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7176:29) at setupComponent (/Users/michelemoresi/Desktop/REPOSITORIES/VUE/ocalAndMainVue3SSR/local_repo/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7131:11) at renderComponentVNode (/Users/michelemoresi/Desktop/REPOSITORIES/VUE/ocalAndMainVue3SSR/local_repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17) at Proxy.renderToString (/Users/michelemoresi/Desktop/REPOSITORIES/VUE/ocalAndMainVue3SSR/local_repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:450:26) at render (/src/entry-server.js:18:21) at async file:///Users/michelemoresi/Desktop/REPOSITORIES/VUE/ocalAndMainVue3SSR/local_repo/server.js:84:39
Using the normal import without alias everything works as expected.
System Info
System:
OS: macOS 12.5.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 64.67 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.19.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 6.14.16 - /usr/local/bin/npm
Browsers:
Brave Browser: 90.1.24.82
Chrome: 107.0.5304.110
Firefox: 106.0.2
Safari: 15.6.1
Safari Technology Preview: 16.4
npmPackages:
vue: ^3.2.45 => 3.2.45
Any additional comments?
I'm trying to dig into the vue and vite code to find where the problem comes out and at the moment I can say the error is caused by
const res = setupComponent(instance, true /* isSSR */);
inside /node_modules/@vue/server-renderer/dist/server-renderer.cjs.js line 172
I'm trying to compare all the vars with the working example vs the not working example and I am not able to find differences, I'm sure there is some mechanism that I don't undertanding.
I would expect that importing tha same file from a different location would not cause any error.
Hope somebody can help me. Thank you.