I have a project using Laravel Inertia, Ziggy, Vue3, Vite, and Typescript. The route()
function is working just fine, I can visit pages and make requests.
However, Typescript throws an IDE error (in PHPStorm, if it matters) about it as it doesn't know about the global function.
I installed the @types/ziggy-js
package to fix this, and then Typescript wants me to import the type definition. OK so I do that, but then Vite starts throwing errors because it can't find the file.
Google says add type
after import
, but when I do that Typescript says 'route' cannot be used as a value because it was imported using 'import type'.
. I tried every suggested fix for that as well and none work.
The only thing I have gotten to work is re-declaring route()
as a variable and setting its type to the imported route
:
import type {default as _route} from 'ziggy-js'
let route: typeof _route
I feel like there has got to be a better way to go about this than to do this in every file?
FINALLY got this solved!! Maybe not the cleanest solution, but it works and with minimal repetition.
Turns out that importing a type and assigning it to route
caused issues with route()
no longer working outside of a form.method()
context.
What I did was:
index.d.ts
from @types/ziggy-js
to my own resources/js/@types/ziggy-js.d.ts
declare module '@ziggy-js' {}
and change declare function
to export function
'@ziggy-js'
to './vendor/tightenco/ziggy/src/js/index.js'
in tsconfig/vite.configimport route from '@ziggy-js'
to the .vue components in which I use route()