Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mixing value and type imports causes errors #2654

Closed
aloker opened this issue Oct 20, 2021 · 6 comments
Closed

Mixing value and type imports causes errors #2654

aloker opened this issue Oct 20, 2021 · 6 comments

Comments

@aloker
Copy link
Contributor

aloker commented Oct 20, 2021

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

You should see:
Firefox:
image
Chrome:
image

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
Copy link
Member

dummdidumm commented Oct 21, 2021

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
Copy link
Member

bluwy commented Oct 21, 2021

@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
Copy link
Member

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
Copy link
Member

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
Copy link
Member

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 benmccann added this to the 1.0 milestone Feb 10, 2022
@benmccann
Copy link
Member

I believe this should have been fixed by #3064

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants