Is it possible to auto import 'svelte/transition'?

[gengns]

I'm trying to use sveltekit-autoimport to auto import svelte/transition module. Probably this is not an issue and just my wrong use or a setting that I'm missing.

Inside vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import autoImport from 'sveltekit-autoimport'

export default defineConfig({
  plugins: [
    autoImport({
      components: ['./src/components'],
      module: {
        svelte: ['onMount', 'createEventDispatcher'],
        'svelte/transition': ['fly'],
        'svelte-apollo': ['mutation']
      },
    }),
    svelte()
  ]
})

Everything is working fine, except: 'svelte/transition': ['fly']

I also tried using different combinations and mapping instead of module but couldn't make it work. The same happens with Vaadin web components.

[yuanchuan]

I can't reproduce it. Have you tried restarting the server?

[gengns]

Yes, @yuanchuan. Maybe I'm missing some configuration. I have created a Minimal Reproducible Example.

Quick checklist

• [X] I am using the latest version of sveltekit-autoimport

What package manager are you using?

npm

What operating system are you using?

Linux

Steps to reproduce

1. clone repo
2. npm i && npm run dev
3. [vite-plugin-svelte] /src/App.svelte:29:4 'fly' is not defined

It works with components, onMount, etc.

Link to minimal reproducible example

https://github.com/gengns/sveltekit-autoimport_1.6.10_missing_modules

[yuanchuan]

Hi @gengns,

fly

You can ignore the error [vite-plugin-svelte] /src/App.svelte:29:4 'fly' is not defined in the console. The fly function is imported correctly on my machine. Double check it by adding console.log(fly) you may see the console outputs that function. I'll look into further if that's not the case.

vaadin-button

The '@vaadin/button': ['vaadin-button'] won't work because the package @vaadin/button doesn't have any exported module named vaadin-button. It does have a export named Button in its source file node_modules/@vaadin/button/src/vaadin-button.js but It's not written in Svelte so you can't use it directly in a Svelte file.

@vaadin/button defines a web component <vaadin-button>, which cannot be recognized by the svelte compiler

[gengns]

Hello @yuanchuan,

fly

I'm running the issue example independently of our machines on Code Sandbox: https://codesandbox.io/p/github/gengns/sveltekit-autoimport_1.6.10_missing_modules/

As you can see on the link above, if you click on the checkbox visible it doesn't do anything, however if you call fly inside the <script> tag first, for example, adding a console.log(fly), it works.

It works:

<script>
  let visible = true
  console.log(fly)
</script>

<label>
  <input type="checkbox" bind:checked={visible}>
  visible
</label>

{#if visible}
  <p in:fly={{ y: 200 }} out:fly={{ y: 200 }}>
    Fly in and out
  </p>
{/if}

It doesn't:

<script>
  let visible = true
</script>

<label>
  <input type="checkbox" bind:checked={visible}>
  visible
</label>

{#if visible}
  <p in:fly={{ y: 200 }} out:fly={{ y: 200 }}>
    Fly in and out
  </p>
{/if}

I think sveltekit-autoimport is not checking outside the Githubissues.

Githubissues is a development platform for aggregating issues.