phosphor-icons-svelte-vite-8-import Svelte Themes

Phosphor Icons Svelte Vite 8 Import

phosphor-icons-svelte import issue with vite 8

Steps to reproduce

Install the packages and run pnpm run dev --force.

Current behavior

Optimizing dependencies fails with:

(!) Failed to run dependency scan. Skipping dependency pre-bundling. Error:   Failed to scan for dependencies from entries:
  /Users/samir/Projects/phosphor-icons-svelte-vite-8-import/src/routes/+layout.svelte
/Users/samir/Projects/phosphor-icons-svelte-vite-8-import/src/routes/+page.svelte

   Build failed with 1 error:

[RESOLVE_ERROR] Error: Could not resolve 'phosphor-icons-svelte/IconMagnifyingGlassRegular.svelte' in virtual-module:/Users/samir/Projects/phosphor-icons-svelte-vite-8-import/src/routes/+page.svelte?id=0
   ╭─[ virtual-module:/Users/samir/Projects/phosphor-icons-svelte-vite-8-import/src/routes/+page.svelte?id=0:4:8 ]
   │
 4 │ import 'phosphor-icons-svelte/IconMagnifyingGlassRegular.svelte'
   │        ────────────────────────────┬────────────────────────────
   │                                    ╰────────────────────────────── Package subpath is not defined by exports

What should happen instead

No error should be emitted.

Notes

This only happens during dependency optimization, i.e. when the dependency cache has not been created yet. Running pnpm run dev for a second time without the --force flag wouldn't show the error, but it would still happen in fresh environments such as CI pipelines. The issue is new with Vite 8, prior version used to work just fine.

Replacing all svelte exports with import in phosphor-icons-svelte package.json seems to solve this. Following is the first 20 lines of my 45k lines patch that does exactly that:

diff --git a/package.json b/package.json
index 155788780cf7b488f8505e397cefc890fb10332a..78caef19001c9562eaac090137fd663eb00c4340 100644
--- a/package.json
+++ b/package.json
@@ -13,36291 +13,36291 @@
   "type": "module",
   "exports": {
     "./IconAcornBold.svelte": {
-      "svelte": "./dist/IconAcornBold.svelte",
+      "import": "./dist/IconAcornBold.svelte",
       "types": "./dist/IconAcornBold.svelte.d.ts"
     },
     "./IconAcornDuotone.svelte": {
-      "svelte": "./dist/IconAcornDuotone.svelte",
+      "import": "./dist/IconAcornDuotone.svelte",
       "types": "./dist/IconAcornDuotone.svelte.d.ts"
     },
     "./IconAcornFill.svelte": {
-      "svelte": "./dist/IconAcornFill.svelte",
+      "import": "./dist/IconAcornFill.svelte",
       "types": "./dist/IconAcornFill.svelte.d.ts"
     },

Top categories

Loading Svelte Themes