[chore] upgrade to vite-plugin-svelte 1.1.0 and enable prebundleSvelteLibraries

[benmccann]

We'll turn prebundleSvelteLibraries on by default in vite-plugin-svelte 2.0 when Vite 4 comes out. For now we turn it on here. The feedback thus far has been good

Ref #2612

[changeset-bot]

🦋 Changeset detected

Latest commit: d3e576a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[schmidtk]

Enabling prebundleSvelteLibraries is causing the below error building my application with vite. I flipped it to false to confirm that specifically caused the error, but I'm unsure how to resolve it. Are there vite/svelte/etc config changes necessary to accommodate this change? Thanks for your help, happy to provide more information if needed.

vite v3.1.4 building SSR bundle for development...
✘ [ERROR] No loader is configured for ".svelte" files: ../../node_modules/@sveltejs/kit/src/runtime/components/error.svelte

[vite-plugin-svelte-kit] Build failed with 1 error:
error: No loader is configured for ".svelte" files: ../../node_modules/@sveltejs/kit/src/runtime/components/error.svelte
error during build:
Error: Build failed with 1 error:
error: No loader is configured for ".svelte" files: ../../node_modules/@sveltejs/kit/src/runtime/components/error.svelte
    at failureErrorWithLog (../../node_modules/esbuild/lib/main.js:1566:15)
    at ../../node_modules/esbuild/lib/main.js:1024:28
    at runOnEndCallbacks (../../node_modules/esbuild/lib/main.js:1438:61)
    at buildResponseToResult (../../node_modules/esbuild/lib/main.js:1022:7)
    at ../../node_modules/esbuild/lib/main.js:1134:14
    at responseCallbacks.<computed> (../../node_modules/esbuild/lib/main.js:671:9)
    at handleIncomingPacket (../../node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (../../node_modules/esbuild/lib/main.js:647:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12)

[benmccann]

@schmidtk can you file an issue with a way to reproduce this? I haven't see this error before and am unsure what to advise without some way to be able to reproduce and debug it

[schmidtk]

@benmccann No problem, I was hoping it would ring a bell. 😄 I'll see if I can reproduce with a simple example, because I'm currently working in a reasonably large monorepo.

[schmidtk]

@benmccann Ok narrowed it down further. The error is a combination of enabling legacy.buildSsrCjsExternalHeuristics in our vite config, and not having an error route in the app. When that flag is enabled and Sveltekit uses its default error page, we see the error I posted above.

I'll check with my team on why we're using that flag and see if we can stop doing that, but adding our own +error.svelte will prevent the build error as a workaround.

Let me know if those two flags should be working together and I can file an issue.

Update: It looks like that flag was a temporary workaround to a vite bug and can be removed.
/issues/5542
vitejs/vite/pull/9296

[jacob-8]

Enabling prebundleSvelteLibraries causes an error in my application which imports a Svelte component from a dependency that tries to use import { PUBLIC_FIREBASE_CONFIG } from '$env/static/public';. This worked fine in 1.0.0-next.525 but not in 1.0.0-next.526.

Since all load functions run simultaneously and there is no easy way to init both client and server side, it's very useful to allow imported libraries to be configured via environment variables. Is there a way to still use environment variables in imported libraries?

[bluwy]

@jacob-8 One workaround we discussed is to set $env/static/public to optimizeDeps.exclude. This could be the default in the future, but on the other hand Svelte packages should try to avoid SvelteKit features unless necessary. In this case, the package could have a function that receives a parameter for PUBLIC_FIREBASE_CONFIG

[jacob-8]

@jacob-8 One workaround we discussed is to set $env/static/public to optimizeDeps.exclude.

Perfect! I'll try that.

on the other hand Svelte packages should try to avoid SvelteKit features unless necessary.

Yeah, I used to pass in a config to the library and would like to return to doing this but with all the changes affecting initialization of a library on both client and server side it was just to painful to make one single solution work across all my projects without awaiting parent in each load. I'm waiting until the dust settles a bit more.

[0gust1]

In our app we use byteMD, and it stopped working with 526, but only in dev mode (npm run preview is fine).

The error message in console is like SyntaxError: The requested module '/node_modules/word-count/index.js?v=4f0918c6' does not provide an export named 'default. (word-count is a dependency of byteMD).

As this message hints to vite dev mode module loading, and this PR was linked from 526 changelog, I post here.
Will try some circumvention in vite.config file ...

[0gust1]

I hadn't much luck fiddling with config files, so I setup a blank sveltekit project to reproduce:
TLDR; I reproduce the problem (reminder: dev mode only) with:

• sveltekit >v225
• export const ssr = false; in master (topmost) +layout.server.ts (our app is a SPA)

testing dichotomy:

• If I downgrade SK version to v225 or lower, it works again.
• If I enable the ssr it works again (with sk >v225)

@benmccann I can push the reproduction repository if needed (with a branch which works and a branch which doesn't).

[0gust1]

@benmccann reproductible repository here: https://github.com/0gust1/sveltekit-bug-repro-526
Should I open an issue ?