Add support vitejs (ESM)

[Rysakov1986]

Help, i have error:
Uncaught SyntaxError: The requested module '/node_modules/leaflet/dist/leaflet-src.js?v=8128ddc4' does not provide an export named 'default'

[ngyewch]

Sorry, I have no experience with vitejs.

I have played with snowpack, but what I find is that different frontend tooling have their own problems.

[benbabics]

@Rysakov1986 did you ever end up getting this to work? I'd like to use this for a project, but I'm getting the same error and @ngyewch answer doesn't really help or give me much hope. It looks as if it's an active project though.

[0gust1]

Using this trick #3 (comment), I was able to run it OK on a svelte-kit project (which is powered by Vite).

Since this summer, there was a lot of improvement on Vite's side to handle the different module flavors (CJS, ESM, UMD, etc.). I'm personally very impatient that the ecosystem will be mainly ESM-only (this topic is such a pain to handle !)

[timwis]

The error sounds like you're doing:

import LeafletMap from 'svelte-leafletjs'

That should use the library's default export, but package.json points vite to the dist directory, and those files don't seem to have a default export. Maybe rollup needs to create an ESM-import-friendly build?

Anyway, try importing the named exports, e.g.

import { LeafletMap, TileLayer } from 'svelte-leafletjs'

[DrewRidley]

The library still does not work even when following that guide.
I get the following error:

svelte-leaflet doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

[DrewRidley]

Nevermind, it seems that I had a second import that was not using the ?client directive. This method still works as far as I am aware.

[notramo]

@ngyewch, as the Svelte ecosystem moved mainly to using Vite as build tool, could you revisit this issue?

[ngyewch]

@notramo Yeah, I have moved to Vite for other Svelte projects. I just have to find some time to migrate this project. Hopefully in the near future.

[jieter]

A basic vite svelte project with svelte-leafletjs works fine, it only emits this warning:

10:00:47 AM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Quoting the link:

missing exports condition

If you see a warning logged for this when using a Svelte library, please tell the library maintainers.

Using the svelte field in package.json to point at .svelte source files is deprecated and you must use a svelte export condition.
vite-plugin-svelte 3 still resolves it as a fallback, but in a future major release this is going to be removed and without exports condition resolving the library is going to fail.

Example:

// package.json
  "files": ["dist"],
  "svelte": "dist/index.js",
+ "exports": {
+   ".": {
+     "svelte": "./dist/index.js"
+   }
  }