Resolve @svelteuidev/core to prebundled version

[benmccann]

Describe the bug

Bug report from Discord: https://discord.com/channels/804011606160703521/1012085571985866914/1012390467331166238

@bluwy stated:

hmm yeah there seems to be an issue with Vite's resolver. It should resolve importing @svelteuidev/core to the one in .vite/deps

Reproduction

npm create vite@latest myapp -- --template svelte-ts

... run npm run dev and it's 21 reqs.

npm i -D @svelteuidev/core

... edit Counter.svelte:

<script lang="ts">
    import {Button} from '@svelteuidev/core';

    let count: number = 0
    const increment = () => {
        count += 1
    }
</script>

<Button on:click={increment}>
    count is {count}
</Button>

... add prebundleSvelteLibraries: true, run npm run dev and it's now 369 reqs and a 4s load time.
@smui or @svelteuidev libraries do show up in node_modules/vite/.deps - but no change in actual behaviour of the requests or bundling that I can see. There is also a message that appears with SMUI stating that it cannot find source for a bunch of @Material deps from SMUI, so that is why I was testing with @svelteuidev as well as it does not have those material deps, but - same issue there

Logs

No response

System Info

tbd

Severity

annoyance

[benmccann]

If I turn on the vite-plugin-svelte debug logging I see it rsolves @svelteuidev/core/index.js via package.json svelte field of @svelteuidev/core. I.e. it seems to be returning the one in node_modules via this line:

vite-plugin-svelte/packages/vite-plugin-svelte/src/index.ts

Line 158 in da6a124

const resolved = resolveViaPackageJsonSvelte(importee, importer, cache);

I'm not sure what the desired code path is supposed to be though or where it might be going wrong. If I simply remove that line it seems to resolve to the correct location

[dominikg]

Note that using a deep import import Button from '@svelteuidev/core/components/Button/Button.svelte'; together with preBundleSvelteLibraries it does create a small bundle and only sends 27 requests on initial devserver load.

Edit:using deep imports for multiple components of svelteuidev creates a separate bundle in .vite for every component.

[k-dahl]

@benmccann @dominikg Worth noting that the actual library we were running into with this was SMUI, and it also has a warning message about not being able to resolve sourcemaps for any of the underlying @material deps. I had been trying @svelteuidev in an effort to narrow things down and see if the issue was specific to the missing sourcemaps, but it was not.

[k-dahl]

This issue also impacts Flowbite Svelte. The example on their getting started page results in 236 requests being made.

Enabling the prebundleSvelteLibraries there results in breakage when rendering:

Uncaught SyntaxError: ambiguous indirect export: default [AccordionItem.svelte:35:7](http://127.0.0.1:5173/node_modules/.pnpm/flowbite-svelte@0.27.4/node_modules/flowbite-svelte/accordions/AccordionItem.svelte?v=90fca3b2)

And the specific line that it references:

import classNames from '/node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js?v=363d9cb2';

If I remove the experimental pre-bundle config the app renders fine.

Using a deep import drops the number of requests down to a more reasonable 25.

[benmccann]

If we made the "svelte" field a boolean it would fix this issue as well as sveltejs/kit#2242

Rich mentioned this idea along with some of the history behind the field on Discord and I preserved it in a GitHub comment here: sveltejs/kit#1959 (comment)

[benmccann]

@blitzd your issue appears to be a different one. I've created a new issue to track that: #463

[dominikg]

fixed in vite-plugin-svelte 1.2.0 with prebundleSvelteLibraries: true the dev page now has 27 requests and is correctly loading the prebundled version of svelteuidev/core.