Is it possible to auto import 'svelte/transition'? about sveltekit-autoimport HOT 6 CLOSED

Awesome, it works like a charm. Great job @yuanchuan, thank you so much!

from sveltekit-autoimport.

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

from sveltekit-autoimport.

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

Quick checklist

• 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

from sveltekit-autoimport.

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

from sveltekit-autoimport.

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 <script> tag when using module. There are plenty of circumstances where you add code directly on the html without using the <script> tag.

from sveltekit-autoimport.

Just released 1.7.0, should fix the undefined fly identifier.

from sveltekit-autoimport.