New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Auto import of Starport and StarportCarrier with Vitesse #36
Comments
With the app.use plugin, they we will be available globally. THere is no need to auto import. |
Added StarportPlugin like so: import { ViteSSG } from 'vite-ssg'
import { setupLayouts } from 'virtual:generated-layouts'
import StarportPlugin from 'vue-starport'
import App from './App.vue'
import generatedRoutes from '~pages'
import '@unocss/reset/tailwind.css'
import './styles/main.css'
import 'uno.css'
const routes = setupLayouts(generatedRoutes)
// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
App,
{ routes, base: import.meta.env.BASE_URL },
(ctx) => {
ctx.app.use(StarportPlugin({ keepAlive: true }))
// install all modules under `modules/`
Object.values(import.meta.globEager('./modules/*.ts')).forEach(i => i.install?.(ctx))
},
) And got the following error in the console: Uncaught (in promise) Error: [Vue Starport] Failed to find <StarportCarrier>, have you initalized it?
at setup (index.mjs:428:13)
at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
at setupStatefulComponent (runtime-core.esm-bundler.js:7109:29)
at setupComponent (runtime-core.esm-bundler.js:7064:11)
at mountComponent (runtime-core.esm-bundler.js:4951:13)
at processComponent (runtime-core.esm-bundler.js:4926:17)
at patch (runtime-core.esm-bundler.js:4518:21)
at mountChildren (runtime-core.esm-bundler.js:4714:13)
at mountElement (runtime-core.esm-bundler.js:4623:17)
at processElement (runtime-core.esm-bundler.js:4595:13) |
I found that I can add <template>
<RouterView />
<StarportCarrier />
</template> But as soon as I add <template>
<div>
<Starport port="test" bg-sky w-20 h-20>
Hello
</Starport>
... |
If I comment-out the Starport component and refresh my browser there is no error, and I can then uncomment Starport and it appears on the page -- but if I refresh again I get the above error. So the Vite HMU seems to be setting up StarportCarrier so Starport finds it, but then a refresh somehow loses it or at least it's not being loaded before the Starport needs it? |
I found that if I just remove the StarportPlugin from main.ts and instead update the AutoImport section of my vite.config.ts to be: AutoImport({
imports: [
'vue',
'vue-router',
'vue-i18n',
'vue/macros',
'@vueuse/head',
'@vueuse/core',
{
'vue-starport': [
'Starport',
'StarportCarrier',
],
},
],
dts: 'src/auto-imports.d.ts',
}), Things work and there is no error. So I'm wondering whether there is an issue with StarportPlugin? Perhaps specific to using it with ViteSSG? i.e. the StarportCarrier is not being setup before the Starport tries to find it? |
helper for reproduction I am also confused why |
It turns out that this bug due to vite-ssg client waiting on router ready const { app, router } = await createApp(true)
// wait until page component is fetched before mounting
await router.isReady(). // <-- this line
app.mount(rootContainer, true) Vue-router official docs points out about
This causes the following code to always execute sequentially (createVNode sequentially), <RouterView v-slot="{ Component }">
<transition name="page-fade">
<component
:is="Component"
absolute left-0 right-0 top-25
/>
</transition>
</RouterView>
<StarportCarrier /> eventually lead to error. the easiest way to temporary fix @Youdaman : <StarportCarrier /> <!-- keep location before RouterView -->
<RouterView>
<!-- other component -->
</RouterView> ps: we can also validate by skipping |
Thanks @tangdaoyuan, your explanation makes sense. That said, I've since encountered an issue where the markup on the site still says So as a test I added I think I will explore using Nuxt or something other than Vitesse for now until this issue is resolved as I really want to use Starport but not if there's conflicts with other modules that are still works in progress that prevent it working. Thank you for also investigating this problem, it makes me feel like I'm not going crazy! :) |
Hi,
I can get Starport to work with Vitesse if I do a manual import of Startport in each page and StarportCarrier in App.vue, however I'd like to use the unplugin-auto-import way, and I tried adding the following to
AutoImport
in vite.config.ts like so:But that didn't seem to work, so I tried the global way in main.ts like so:
But again that didn't work.
And I noticed that in the Starport playground demo it just has the following in main.ts:
And I tried this using this in ViteSSG like so:
But that also didn't seem to work.
Am I missing a step with the auto import configuration somewhere? I wold rather auto import than manually do so in each page/App.
The text was updated successfully, but these errors were encountered: