@sveltejs/kit and vite@3 crash Chrome

[sserdyuk]

Describe the bug

We've noticed that a certain page causes Chrome to hang or crash. I was able to create a sample project for this issue. I think it's likely something to do with Vite in dev mode. If I build the project and preview it, everything is working fine.

We've currently switched to Firefox as a workaround.

Reproduction

Please clone https://github.com/sserdyuk/vitebug-08-08-2022

Please run npm run dev and navigate to http://localhost:4100/mock3/explore. The page usually renders once but crashes Chrome on a refresh. I am also noticing it takes quite a bit of time to load that page in the first place.

Logs

No response

System Info

System:
    OS: Linux 5.4 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 21.54 GB / 30.74 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 16.14.0 - ~/.bin/node/bin/node
    npm: 8.3.1 - ~/.bin/node/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 103.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.64 
    @sveltejs/adapter-node: ^1.0.0-next.71 => 1.0.0-next.86 
    @sveltejs/kit: next => 1.0.0-next.405 
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.36 => 1.0.1 
    svelte: ^3.44.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.4

Severity

serious, but I can work around it

Additional Information

No response

[benmccann]

Thanks for the reproduction @sserdyuk. Would you be able to slim it down any more? E.g. I notice there are imports from @rgossiaux/svelte-heroicons/outline and @rgossiaux/svelte-headlessui. Are both of these required to reproduce the issue, or just one, or neither? If we can figure out it's related to usage of a certain library that will help a lot

[sserdyuk]

@benmccann I already reduced it as much as possible without requiring too many attempts to reproduce the issue. I think the issue is somehow connected with how Vite handles those imports. If I remove both packages, the issue goes away.

[benmccann]

I just tried this and it's not freezing Chrome for me, but I do see it making more than 1,000 requests, so I suspect this is a duplicate of https://github.com/sveltejs/kit/issues/2612. Can you try the following option in svelte.config.js and see if it fixes it for you?

  vitePlugin: {
    experimental: {
      prebundleSvelteLibraries: true
    }
  }

@bluwy, setting prebundleSvelteLibraries seemed to help a lot and take the requests from 1,000 to 100 for me, but I was still surprised that a 100 requests were being made. I wonder if there's something more that could be improved here to make prebundleSvelteLibraries work even better for this reproduction?

[sserdyuk]

@benmccann Thank you for looking into this. Yes, setting the prebundleSvelteLibraries: true config parts solves the problem for me. The only thing that's left is a noticeable delay in SSR when loading /mock3/explore and the dev server is just started.

[bluwy]

Re 100+ requests, looks like prebundleSvelteLibraries only took effect on @rgossiaux/svelte-heroicons but not @rgossiaux/svelte-headlessui, otherwise it should've been lesser requests made. It seems to be like a resolve bug in either vite-plugin-svelte or Vite for that package specifically that's causing prebundling to skip it. In any case, I'll transfer this issue over to vite-plugin-svelte to keep track of this.

Also re SSR: perhaps it's also something to do with the number of components, which future Vite 3 or 4 versions would fix, bringing prebundling in SSR too.

[dominikg]

to work around this problem, prefer deep imports of .svelte files, see also https://github.com/rgossiaux/svelte-headlessui/issues/107

I wonder if the addition of tailwind in the reproduction plays a part here too.

[bluwy]

Another report on discord showed that @svelteuidev/core has a similar issue, where we did prebundle the svelte library, but Vite doesn't resolve to the prebundled file.

[benmccann]

I found the issue with @rgossiaux/svelte-headlessui. The bug was in the reproduction. It had type="ts", which as far as I know is not valid. If you change it to lang="ts" then it works:

https://github.com/sserdyuk/vitebug-08-08-2022/blob/d6a649d6bc535734347c30a6ac3b6c6d7c9ff1cf/src/routes/mock3/_shared/Explore.svelte#L1

[benmccann]

I think we can close this issue now. I've filed a new one to track the @svelteuidev/core issue: https://github.com/sveltejs/vite-plugin-svelte/issues/421

[dominikg]

closing per @benmccann's comment.

The crash in the original report likely happened due to the large number of requests.