TypeError: Cannot read properties of undefined (reading '$isServer')

[jamols09]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
I'm using Vite

//main.ts

const VueCustomTooltip = (await import('@adamdehaven/vue-custom-tooltip')) .default

 app.use(VueCustomTooltip, {
      name: 'VueTooltip',
      color: '#fff',
      background: '#039be5',
      borderRadius: 4,
      fontWeight: 500,
    })

under Vite.config.ts I've also added optimizeDeps.include the plugin

Expected behavior
The plugin should load

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Windows 11]
• Browser Edge
• Package Version latest 1.4.4

Additional context
I'm not really sure what causes the error. I only can guess probably due to being being imported asynchronously?

[adamdehaven]

@jamols09 I'm not sure there is enough info here for me to help, as the error your seeing is definitely related to your project, not with the tooltip plugin itself. I would have to imagine it's something in your Vite configuration or the fact that you're loading the component asynchronously, but again, I can't reproduce the issue. Closing for now.

Here's a related bug in Vite, but translation is required. Also here.

[jamols09]

@adamdehaven can you help me understand why the component breaks when its imported like this ?

import { createApp } from './app'
createApp({
  async enhanceApp(app) {
  const VueCustomTooltip = await import('@adamdehaven/vue-custom-tooltip') //here

But not this regular import

import { createApp } from './app'
import VueCustomTooltip, {
  TooltipOptions,
} from '@adamdehaven/vue-custom-tooltip'

I got it to work by using the latter I just don't understand why other plugins work when imported like the first one.

[adamdehaven]

Are you utilizing the plugin inside a Vue 3 project, or are you using VuePress or Nuxt?

If you can recreate the issue inside a sandbox I can help you take a look: https://codesandbox.io/s/

[jamols09]

Im using Vue 3 with Vite.
I was finally able to run your package with this snippet const VueCustomTooltip = (await import('@adamdehaven/vue-custom-tooltip').default
I've changed the code from the typical import. :)

What's the difference between await import and (await import()).default. I have been researching a lot but nothing else have been mentioned of the latter.

[adamdehaven]

Ohhhh I missed that you didn't have .default at the end.

This imports the default export from the plugin, which is the component. Glad you got it working! 🎉