tighten / ziggy

Use your Laravel routes in JavaScript.
MIT License
3.83k stars 247 forks source link

Typescript, Vite, and, Vue cannot be used together #704

Closed 6XGate closed 7 months ago

6XGate commented 7 months ago

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

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.