Dev Server - TypeScript: The requested module X does not provide an export Y on hot reload

[elliott-with-the-longest-name-on-github]

Describe the bug
For some reason, one particular type based on SvelteComponentTyped seems to be being type-erasured incorrectly in the dev server on hot reloads. This is way easier to see than to explain, so just follow the repro steps below (I was able to get two people reproducing it in the Discord pretty quickly).

To Reproduce

1. Clone my repository.
2. Check out the this-does-not-work branch.
3. Run the dev server (yarn dev)
4. Make any change to routes/index.svelte that triggers a hot reload.
5. Profit by seeing the error: SyntaxError: The requested module '/src/lib/Notifications/types.ts' does not provide an export named 'CustomNotificationComponent'

You can also diff the this-works branch with the this-does-not-work branch to see the workaround that, for some super weird reason, makes everything work fine.

Expected behavior
No 500 error :)

System: OS: Linux 5.8 Pop!_OS 20.04 LTS CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor Memory: 12.36 GB / 31.37 GB Container: Yes Shell: 5.0.17 - /bin/bash Binaries: Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn npm: 7.15.0 - ~/.nvm/versions/node/v14.16.1/bin/npm Browsers: Chromium: 83.0.4103.116 Firefox: 89.0.1 npmPackages: @sveltejs/adapter-node: next => 1.0.0-next.27 @sveltejs/kit: next => 1.0.0-next.116 svelte: ^3.34.0 => 3.38.3

Severity
Major annoyance because I can't export my types from one file :)

[dummdidumm]

I don't see that exact line there from a quick glance but in general you need to be completely splitting type and value imports, which is not the case in this line: import { NotificationTypes, NotificationPositions } from '$lib/Notifications/types';
Closing as duplicate of sveltejs/svelte-preprocess#318

[elliott-with-the-longest-name-on-github]

I'm not sure I follow. Both NotificationTypes and NotificationPositions are enums and are being used as values. Importing them as types does not work.

Additionally, the error presents even if you completely remove that import and references to those enums in the HTML.

[elliott-with-the-longest-name-on-github]

And (maybe) to clarify -- that error is presented as a 500 error in the browser, not in the console.

[elliott-with-the-longest-name-on-github]

@dummdidumm

I added a new branch to the repo -- this-does-not-work-minimal. It completely removes NotificationTypes and NotificationPositions from the routes/index.svelte file. That file is now only rendering a main element with the Notifications component inside of it, and the error persists in both Chromium and Firefox:

I also have "importsNotUsedAsValues" = "error" in tsconfig.json, so my intellisense/checking won't even let me incorrectly import types as values.

[elliott-with-the-longest-name-on-github]

@dummdidumm

Sorry to bother again...

I read the entire issue that this was closed as a duplicate of. It was super interesting! I'm still not sure how this is a duplicate of it, though, especially given the minimal repro.

As a general question, if I need to import an enum which will be used as both a value and a type, what am I supposed to do?

[dummdidumm]

In you minimal repro, inside Notifications.svelte you are doing import { NotificationPositions, CustomNotificationComponent } from '../types'; . CustomNotificationComponent is a type, not a value, and due to the reasons listed in the referenced issue, this will break. The error is pretty descriptive now actually, it tells you that CustomNotificationComponent is a type, not a value. So you need to split up all occurences of that into import { NotificationPositions } from '../types'; import type { CustomNotificationComponent } from '../types';. If you use an enum as a type only, use import type for it, if you use it as a value, too, use import for it.

[elliott-with-the-longest-name-on-github]

Ahh, thank you -- that helped me find the issue. It's very strange that I wasn't getting any Intellisense about importing CustomNotificationComponent even though I had the importsNotUsedAsValues flag set to error... it's warned me in all other cases.

[dummdidumm]

Yes, that's current quirk by Svelte that it needs type and value imports strictly separated, which TS doesn't normally need and therefore it also doesn't yell at you. The linked svelte-preprocess issue explains this in more detail