Typescript, Vite, and, Vue cannot be used together

[6XGate]

Ziggy version

1.8.1

Laravel version

10.41.0

Description

After install Ziggy's Composer and NPM package, everything seems to be resolvable by TypeScript except for ZiggyVue.

 ERROR(TypeScript)  Module '"ziggy-js"' has no exported member 'ZiggyVue'. Did you mean to use 'import ZiggyVue from "ziggy-js"' instead?
 FILE  /home/matthew/Projects/scalecore/resources/js/app.ts:7:10

     5 | import { createInertiaApp } from '@inertiajs/vue3';
     6 | import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
  >  7 | import { ZiggyVue } from 'ziggy-js';
       |          ^^^^^^^^
     8 |
     9 | const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
    10 |

Additional info

• TypeScript: 5.3.3
• Vite: 5.0.0
• Vue: 3.2.3

vite.config.ts

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import checker from 'vite-plugin-checker'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [
    tsconfigPaths({ projects: ['./tsconfig.json'], loose: true }),
    laravel({ input: 'resources/js/app.ts', refresh: true }),
    checker({ typescript: true, vueTsc: true }),
    vue({ template: { transformAssetUrls } }),
    vuetify({ styles: 'sass' })
  ]
});

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "isolatedModules": true,
  }
}

Note: Adding the path alias to the composer version breaks things further since it can't seem to find the index.d.ts file of that package. A similar issue exists attempting to import { Ziggy } from './ziggy'

Ziggy call and context

N/A, unable to build front-end code.

Ziggy configuration

N/A, unable to build front-end code.

Route definition

N/A, unable to build front-end code.

[bakerkretzmar]

ZiggyVue is in the vue subdirectory of the exported JavaScript, so you have to import it from there. Either uninstall the NPM package and set up the import/path aliases according to the docs (using vendor/tightenco/ziggy/dist/vue.es.js) or update your ziggy-js import to ziggy-js/vue.

[6XGate]

Adding the vendor alias produces the following result:

ERROR(vue-tsc)  Module '"ziggy-js"' has no exported member 'ZiggyVue'. Did you mean to use 'import ZiggyVue from "ziggy-js"' instead?
 > 9 | import { ZiggyVue } from 'ziggy-js'

Changing the import to ziggy-js/vue produces the following results:

ERROR(vue-tsc)  Cannot find module 'ziggy-js/vue' or its corresponding type declarations.
 >  9 | import { ZiggyVue } from 'ziggy-js/vue'

Neither method works in TypeScript, there is no .d.ts for the vue.js, vue.es.js, or vue.m.js files.

The workaround I ended up using was to just write the ZiggyVue plugin in a TypeScript module as so:

import type { App } from 'vue'
import route from 'ziggy-js'
import './ziggy'

type Options = Exclude<Parameters<typeof route>[3], undefined>

const ziggyPlugin = {
  install: (app: App, options?: Options | undefined) => {
    const wrapper = (...parameters: Parameters<typeof route>) => {
      const [name, params, absolute, config = options] = parameters

      return route(name, params, absolute, config)
    }

    app.mixin({
      methods: {
        route: wrapper
      }
    })

    if (Number.parseInt(app.version) > 2) {
      app.provide('route', wrapper)
    }

    app.config.globalProperties.$route = route
    app.config.globalProperties.route = route
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    route: typeof route
    $route: typeof route
  }
}

export default ziggyPlugin