Skip to content

Vue3 Server renderer not resolving aliases to external component library #7227

@mikimoresi

Description

@mikimoresi

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions