Mixing value and type imports causes errors

[aloker]

Describe the bug

When value imports and type imports are mixed in a typescript file, the app will crash in the browser saying import not found: NameOfTheImportedType or that the imported file does not export "NameOfTheImportedType" (depends on the browser).

This does not happen in .svelte files, only in .ts files.

What's new in Svelte: October 2021 mentions that "TypeScript users no longer have to strictly separate type imports and value imports when using Svelte version 3.39 or higher and svelte-preprocess version 4.9.5 or higher.", though I'm not sure if this is only related to .svelte files.

Reproduction

• Check out https://github.com/aloker/sveltekit-import-issue
• Launch the dev server (npm run dev)

You should see:
Firefox:

Chrome:

Now go to src/lib/timeStore.ts (https://github.com/aloker/sveltekit-import-issue/blob/5749cbd79b725c550477924e399942bbfb1ade64/src/lib/timeStore.ts#L1-L6)
Use separate imports for the value and the type, ie

import {readable} from 'svelte/store';
import type {readable} from 'svelte/store';

The page now works again.

Logs

500
The requested module '/node_modules/.vite/svelte_store.js?v=75f23b38' does not provide an export named 'Readable'
SyntaxError: The requested module '/node_modules/.vite/svelte_store.js?v=75f23b38' does not provide an export named 'Readable'

System Info

System:
    OS: Linux 5.13 Pop!_OS 21.04
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 11.68 GB / 31.28 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 7.24.1 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 94.0.4606.54
    Firefox: 93.0
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.187 
    svelte: ^3.42.6 => 3.44.0

Severity

annoyance

Additional Information

I couldn't find the related issue mentioned in the blog post. This might be a regression or a duplicate, I don't know. It might also rather belong to Svelte or vite.

[dummdidumm]

It works inside Svelte files, yes, but for SvelteKit, ironically it doesn't work in TS files. The reason is that Vite uses ESBuild to transform them on a per-file basis and ESBuild behaves wrong currently. See evanw/esbuild#1525 for more info. With TypeScript 4.5 this will all get easier by turning on preserveValueImports which will make TS neatly separate the type and value imports for you.

[bluwy]

@aloker What happens if you remove "importsNotUsedAsValues": "error" in the tsconfig? I think it should be safe to remove that with svelte-preprocess supporting none type import now, perhaps.

[dummdidumm]

TS 4.5 is out with the new preserveValueImports option which we should use in order to strictly separate type and value imports. ESBuild will implement this soon: evanw/esbuild#1525 . Once that lands and Vite is updated, we should update our starter template accordingly and then close this.

[benmccann]

That option has been included in esbuild 0.14: https://github.com/evanw/esbuild/blob/master/CHANGELOG.md#0140

Folks are focused on getting Vite 2.7 out-the-door, so I don't think it will upgrade the esbuild version. We'll probably have to wait awhile until Vite 2.8 is released.

We're also looking at removing esbuild from some or all of the adapters (e.g. #2580 or #2931)

[benmccann]

I've sent a PR to upgrade to TypeScript 4.5: #3809

@dummdidumm I'm not quite sure how to leverage preserveValueImports, so hopefully you can send a follow-up for that one 😉

[benmccann]

I believe this should have been fixed by #3064