Vite 6 and lifecycle_outside_component

[Magnus-Ignitic]

With Vite 6.0.11 the navigation menu gives a lifecycle_outside_component error (works fine with Vite 5):

chunk-2YAB4CCV.js?v=35f15f77:931 Uncaught (in promise) Error: https://svelte.dev/e/lifecycle_outside_component
    at lifecycle_outside_component (chunk-2YAB4CCV.js?v=35f15f77:931:11)
    at get_or_init_context_map (chunk-FDXU67ID.js?v=35f15f77:33:5)
    at setContext (chunk-FDXU67ID.js?v=35f15f77:22:3)
    at Context2.set (bits-ui.js?v=35f15f77:1463:12)
    at useNavigationMenuRoot (bits-ui.js?v=35f15f77:32276:29)
    at Navigation_menu (bits-ui.js?v=35f15f77:32369:21)
    at chunk-L3ALRKAS.js?v=35f15f77:816:58
    at update_reaction (chunk-2YAB4CCV.js?v=35f15f77:1200:23)
    at update_effect (chunk-2YAB4CCV.js?v=35f15f77:1305:21)
    at create_effect (chunk-2YAB4CCV.js?v=35f15f77:2390:7)

[esafak]

I suspect bits will need to upgrade to https://github.com/melt-ui/next-gen for Svelte 5 support.

[Magnus-Ignitic]

So it's not specifically the navigation menu. Also happens with for example tooltip provider (anything using useXxxx in bits-ui?)

Only happens with Vite 6 and only intermittently when trying with a new project or on svelte Labs.

Any ideas or suggestions on how to debug or dig deeper welcome.

[shyakadavis]

Mind sharing what version you're using, and/or a repro?

[Magnus-Ignitic]

I've tried with different versions of Svelte 5, Sveltekit and bits ui including 1.1.0.

Will try to do a bisect to produce a repo where it's somewhat reproducible as soon as I can.

I saw it once (yes I realize how that looks 🤪) in this Svelte Labs project:

https://www.sveltelab.dev/eg404ptnst7crsb

[Magnus-Ignitic]

See svecosystem/runed#217 this seems very much related @shyakadavis

[Magnus-Ignitic]

I found my culprit which is the following lines in vite.config.js:

  resolve: {
    // The default would be [ 'svelte', 'node' ]
    // as set by vite-plugin-svelte and vitest.
    // This sets [ 'browser', 'svelte', 'node' ]
    conditions: mode === 'test' ? ['browser'] : [],
  },

used to make tests work.

Reproduction

https://www.sveltelab.dev/3aiwrh7bswdkxp6

Solution

Following the instructions on how to set up the Svelte testing library below, there is no apparent need to include resolve in the setup, simply removing it seems to work. In Vite 5 things were done magically it seems, but if using resolve in Vite 6 you need to correctly set the defaults yourself: ['module', 'browser', 'development|production']

Related links

• https://vite.dev/config/shared-options.html#resolve-conditions
• Svelte 5: vitest + jsdom error: mount(...) is not available on the server sveltejs/svelte#11394
• https://testing-library.com/docs/svelte-testing-library/setup/