Importing default module export w/o alias for Ziggy.js

[bradleybernard]

Hi there, I'm trying to use the auto import feature to import Ziggy.js (https://www.npmjs.com/package/ziggy-js) which is a popular package used to expose app routes to JavaScript for Laravel projects.

My setup:

• Laravel 9
• Vite
• Vue 3
• JS / little TS sprinkled in

I'm using Vite as the bundler/dev-server and using the AutoImport plugin to try to achieve this. I've had success auto importing axios and lodash but not as much luck with ziggy.js.

The import that works manually in my Vue SFCs:

import route from 'ziggy-js';

route('logout');

So I tried to set that up in vite.config.js:

 AutoImport({
            eslintrc: {
                enabled: true,
            },
            vueTemplate: true,
            include: [
                /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
                /\.vue$/,
                /\.vue\?vue/, // .vue
            ],
            imports: [
                {
                    'axios': [
                        ['default', 'axios'], // import { default as axios } from 'axios',
                    ],
                    'lodash': [['default', '_']], // import { default as _ } from 'lodash',
                    'ziggy-js': ['route'], // import route from 'ziggy-js'; but  import { default as route } from 'ziggy-js',
                },
            ],
        }),

However the generated file: auto-imports.d.ts shows:

// Generated by 'unplugin-auto-import'
export {}
declare global {
  const _: typeof import('lodash')['default']
  const axios: typeof import('axios')['default']
  const route: typeof import('ziggy-js')['route']
}
// for vue template auto import
import { UnwrapRef } from 'vue'
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    readonly _: UnwrapRef<typeof import('lodash')['default']>
    readonly axios: UnwrapRef<typeof import('axios')['default']>
    readonly route: UnwrapRef<typeof import('ziggy-js')['route']>
  }
}

Highlighting the errors in PHPStorm lines:

const route: typeof import('ziggy-js')['route']
readonly route: UnwrapRef<typeof import('ziggy-js')['route']>

TS2339: Property 'route' does not exist on type 'typeof import("/~/Code/my_project/node_modules/@types/ziggy-js/index")'.

When I take a look at the file for definitions (powered by DefinitelyTyped), I see (direct link to it: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/549b5a3cf3c34a7639d711e08747688ec6bbb889/types/ziggy-js/index.d.ts#L99):

export default route;

So I'm trying to understand how I can use unplugin-auto-import to achieve an import that looks like:

import route from 'ziggy-js';

Given the configuration, it seems to always produce imports along the lines of:

import { default as alias } from 'package';

Any advice here would be greatly appreciated!

[bradleybernard]

Looks like same issue as here: https://github.com/antfu/unplugin-auto-import/issues/162

I worked around this by creating a local JS file to import then re-export things to make unplugin-auto-import happy: ziggyjs.js

import route from 'ziggy-js';
export { route };

In my vite.config.js under the imports key:

imports: [
   '@/ziggyjs': [['route', 'route']],
]

This seems to work!