Failed to resolve component: RouterLink

[EngHell]

Versions

• 2.0

Describe the bug

When providing a template containing router-link the component fails to solve with the next message:

[Vue warn]: Failed to resolve component: RouterLink 
  at <ToastSuccessAddForm key=1 toast-id=0 resourceId=1  ... > 
  at <VtToast key=0 eventBus= 
Object { allHandlers: {…} }
 position="top-right"  ... > 
  at <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  at <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__container top-right" > 
  at <VueToastification eventBus= 
Object { allHandlers: {…} }
 >

Expected behavior

What should happen is, that a toast with a router link is created but instead it is not.

Steps to reproduce

1. Create a component containing router-link, can be with a render function or template both fail for example.
   Component.vue

<script lang="ts">
import { defineComponent, h, resolveComponent } from 'vue'

export default defineComponent({
	props: {
		resource: {
			type: String,
			required: true,
		},
		resourceId: {
			type: Number,
			required: true,
		},
	},
	setup(_) {
		return () =>
			h('div', [
				`${_.resource} was succesfully created. `,
				h(
					resolveComponent('RouterLink'),
					{
						to: {
							name: 'users.update',
							params: { id: _.resourceId },
						},
					},
					() => ['Click here to review'],
				),
			])
	},
})
</script>

2. Second use this component as content for Toast.success or any variant.
   app.js

import MyComponent from "./Component.vue"
....
const component = {
				component: MyComponent
			}
toast.success(component, { timeout: false })

Your Environment

-vite: 2.0.0-beta34
-vue:3.0.5(@next)
-vue-router:4.0.3 (@next)

Additional context

This component renders fine as you can see in the next screen shot at the bottom you can see its complete, (despite the fact theres no underline in the link due to css)

[EngHell]

I have made some reasearch and i belive this is due to the fact that the app.context differs from the main app context when you call createApp or if youre using render, check this repo for a working fix https://github.com/pearofducks/mount-vue-component/blob/master/index.js

After testing with any other custom component, any local rendered component works as it should but global components do fail, I still think this is due to the app._context being different inside your exported components.

After taking some time to check I kind of have setup a replace for createApp in this branch, it fails way too many tests due to all them needing an app context EngHell@171c0b6#diff-961a271495d4d769f6f8871c34b7d8cd4172d8c1d3b8feb71664be1a29a88654

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[Maronato]

Hello! I may be too late, but this will probably help someone else.

Your findings are correct. When you register the Toast plugin, an entirely new app is created to prevent the plugin from messing with things in your actual app.
That, however, results in the context between both apps being different, and, therefore, your global plugins and components won't be available within toasts.

While I do like your solution of copying the context over, I don't think it is necessary for sharing the Vue router. All you need to do is to make the toast app use the same router instance as your actual app through the onMounted hook:

app.use(router)

const toastOptions = {
  onMounted: (_, toastApp) => {
    // Register the router
    toastApp.use(router);
  },
};
app.use(Toast, toastOptions);

Here is a working example:

[tiagoskaneta]

@Maronato while that works for Vue router, what would be your suggestion for other arbitrary plugins?

I have, for example, a dependency to Quasar (https://quasar.dev/) and duplicating the use plugin registration, although possible, is not ideal. In particular for multiple dependencies, this can quickly become too convoluted.

Ideally it should be possible to just reuse the existing app, although I'm not entirely familiar with what ways could this plugin mess it up.

[Maronato]

To reuse the existing app, the plugin would, besides other things, need to replace the root component with something like

<Fragment>
  {{ old root }}
  {{ toast root }}
</Fragment>

While that might work, it may break things in difficult-to-track ways because plugins and your app may make assumptions about the shape of the component tree.

Instead of reusing the app instance, you can reference the data that plugins/etc inject into your regular app onto the toast app. Third-party and user content can be stored in mostly two places: app._context and app.config. Using the onMounted hook you can copy over the properties that you need, or you can merge them by reference, so that both share the same state. Keep in mind that, as they share state, changes can come from both ways.

By default, Vue-toastification will not interact with the app's context or configs, but you should still keep that in mind in case you face any weird bugs.

Here is an example of setup that should cover 99% of use cases. Any plugins, components, mixins, directives, provides and global properties you set in your regular app will be available inside toasts:

const toastOptions: PluginOptions = {
  onMounted: (_, toastApp) => {
    /* Merge or replace the context properties you need */
    toastApp._context.components = app._context.components
    toastApp._context.directives = app._context.directives
    toastApp._context.mixins = app._context.mixins
    toastApp._context.provides = app._context.provides
    toastApp.config.globalProperties = app.config.globalProperties
  },
};

Here is a working example showing the sharing of not only RouterLink but also reactive values provided through other plugins:

[Maronato]

With that said, I'm not familiar with Quasar but it seems to be a lot more than a "plugin".
Even so, most if not all possible places to store data in an app are easily available and mergeable using the method displayed above.

If it doesn't work for you, however, please report back so we can look for alternatives