Unable to compile / import Transition from svelte-transition in svelte kit SSR

[eliasdefaria]

Hi there, I'm using the combobox element from svelte-headlessui out-of-the-box (just copied the code from the docs site). It looks like I get an ESM loader issue when Svelte tries to handle the svelte-transition import. See below:

|- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/papi/Desktop/work/Promise/sdf/platform/console/node_modules/svelte-transition/Transition.svelte
    at new NodeError (node:internal/errors:393:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)

It seems this may be an issue with how svelte-transitioned is package. Let me know if you need any more info. Thanks!

[CaptainCodeman]

Do you have a Svelte project setup? i.e. is it handling .svelte files elsewhere

[eliasdefaria]

Yep, it is successfully processing the rest of my svelte files. If I just remove the import Transition from 'svelte-transition' from the combobox Svelte, the whole thing works. Here's my svelte and vite config:

svelte.config.ts

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter({ out: 'dist' }),
  },
};

export default config;

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
	plugins: [ sveltekit() ],
	optimizeDeps: {
		include: [ 'highlight.js', 'highlight.js/lib/core' ],
	}
};


export default config;

[valle-xyz]

@CaptainCodeman could it be

PM [vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

svelte-transition@0.0.7

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

[CaptainCodeman]

I've updated the dependencies / packaging, see how that works ...

[KenPrehoda]

Update broke my project with

Internal server error: Failed to resolve entry for package "svelte-transition". The package may have incorrect main/module/exports specified in its package.json.

[candidosales]

I am having trouble using Astro and encountering the same problem repeatedly.

  ✘ [ERROR] Failed to resolve entry for package "svelte-transition". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

    node_modules/esbuild/lib/main.js:1360:21:
      1360 │         let result = await callback({

[candidosales]

Here is an example of how to setup the package.json: https://github.com/melt-ui/melt-ui/blob/develop/package.json

[CaptainCodeman]

Sorry about that, I missed adding the "files" to package.json so the update to the new svelte packager meant they were .gitignore'd