Subscribe on changes!

Vue3 Server renderer not resolving aliases to external component library

avatar
Nov 27th 2022

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.