Cannot find module 'ziggy' or its corresponding type declarations.

Ziggy version

v1.2.0

Laravel version

v8.42.1

Description

When using Vue3 and TypeScript, in my app.ts where I try to apply the ZiggyVue plugin using the import statement I get the following error when I try to compile:

TS2307: Cannot find module 'ziggy' or its corresponding type declarations.

When I use const ZiggyVue = require("ziggy"); it works perfectly fine and I am able to call the routes function. I had this same issue with Ziggy 1.1.0 using the route mixin. I am using laravel mix version 6. Here is my configuration below:

webpack.mix.js configurations:

const mix = require("laravel-mix");
const webpack = require("webpack");
const path = require("path");

mix.ts("resources/js/app.ts", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .sass("resources/sass/app-dark.scss", "public/css")
    .alias({
        ziggy: path.resolve("vendor/tightenco/ziggy/dist"),
    })
    .webpackConfig({
        plugins: [
            new webpack.DefinePlugin({
                __VUE_OPTIONS_API__: false,
                __VUE_PROD_DEVTOOLS__: false,
            }),
        ],
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                    },
                    exclude: /node_modules/,
                },
                {
                    test: /\.vue$/,
                    loader: "vue-loader",
                },
            ],
        },
    })
    .vue();

Ziggy call and context

import { createApp } from "vue";
import App from "./App.vue";
import "./bootstrap";
import { Quasar } from "quasar";
// const ZiggyVue = require("ziggy"); //works
import { ZiggyVue } from 'ziggy'; //does not work

createApp(App).use(Quasar, ZiggyVue).mount("#app");

Ziggy configuration

N/A

Route definition

N/A

[DSmedley]

Ok, sorry for the delay, I have not had any time to work on this. But I finally solved this issue. There were actually two different issues at hand and once I solved the first one, the second one was way easier to figure out.

The first issue, from my understanding, is because you guys wrote this in javascript and not typescript, there are no types. By default typescript will reject this with a “Could not find a declaration file for module xxxxx implicitly has an any type” error. A work around for this on my end was to add “noImplicitAny”: false to the compilerOptions in tsconfig.json.

The way that I have read and understood this issue is that for you guys to be compatible with typescript and not require us to disable noImplicitAny, you guys would have to write a types package.

With this disabled I still had an issue with the alias but both of the following configurations worked (I am using the routes directive):

app.ts

import route from "../../vendor/tightenco/ziggy/dist";
route("welcome", undefined, undefined); //my default route is named welcome for some reason
createApp(App).use(Quasar).mount("#app");

import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue";
createApp(App).use(Quasar).use(ZiggyVue).mount("#app");

Finally, to solve the alias issue, all I had to do was sync my aliases in the tsconfig file like so:

Using route: tsconfig.json

{
    "compilerOptions": {
        "paths": {
            "ziggy": ["vendor/tightenco/ziggy/dist"]
        },
    }
}

webpack.mix.js

.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist"),
})

app.ts

import route from "ziggy";
route("welcome", undefined, undefined);
createApp(App).use(Quasar).mount("#app");

Using vue plugin: tsconfig.json

{
    "compilerOptions": {
        "paths": {
            "ziggy": ["vendor/tightenco/ziggy/dist/vue"]
        },
    }
}

webpack.mix.js

.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
})

app.ts

import { ZiggyVue } from "ziggy";
createApp(App).use(Quasar).use(ZiggyVue).mount("#app");

I hope this makes sense and can help you guys understand the issue as well as help anyone else using typescript with vue3

[bakerkretzmar]

@DSmedley thanks a lot for following up with more details. I’d certainly like to eventually add types to this codebase or DefinitelyTyped. Closing this now but hopefully it’s helpful to anyone else bumping this, and we’ll keep it in mind.